在接收服务器端传过来的图片将其转换成base64格式赋值给img标签时,出现了上面这个错误,通过查找,参考下面这篇文章,找到了答案,表示感谢。
原因
服务器端没有将要传递过来的图片数据进行base64编码
解决办法
在服务器端进行编码,后台使用的是java,提供以下代码:
1、base64编码工具类,该类我也是参考网上大佬的,然后添加了一些自己的东西,时间太久了,记不得具体出处了,有点不好意思,嘻嘻。
package com.java1234.utils;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
@SuppressWarnings("restriction")
public class Base64Util {
public static void main(String[] args) throws Exception {
//本地图片地址
String path = "D:"+File.separator+"login.jpg" ;
String url = path;
//在线图片地址
String string = "http://bpic.588ku.com//element_origin_min_pic/17/03/03/7bf4480888f35addcf2ce942701c728a.jpg";
String str = Base64Util.ImageToBase64ByLocal(url);
String ste = Base64Util.ImageToBase64ByOnline(string);
System.out.println(str);
//
// Base64Util.Base64ToImage(str,"C:/Users/Administrator/Desktop/test1.jpg");
//
// Base64Util.Base64ToImage(ste, "C:/Users/Administrator/Desktop/test2.jpg");
}
/**
* 本地图片转换成base64字符串
* @param imgFile 图片本地路径
* @return
*
* @author ZHANGJL
* @dateTime 2018-02-23 14:40:46
*/
public static String ImageToBase64ByLocal(String imgFile) {// 将图片文件转化为字节数组字符串,并对其进行Base64编码处理
InputStream in = null;
byte[] data = null;
// 读取图片字节数组
try {
in = new FileInputStream(imgFile);
data = new byte[in.available()];
in.read(data);
in.close();
} catch (IOException e) {
e.printStackTrace();
}
// 对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(data);// 返回Base64编码过的字节数组字符串
}
/**
* 本地图片byte数组转换成base64字符串
* @param imgFile 图片本地路径
* @return
*
* @author ZHANGJL
* @dateTime 2018-02-23 14:40:46
*/
public static String ImageByteArrayToBase64ByLocal(byte[] imgArray) {// 将图片文件转化为字节数组字符串,并对其进行Base64编码处理
// 对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(imgArray);// 返回Base64编码过的字节数组字符串
}
/**
* 在线图片转换成base64字符串
*
* @param imgURL 图片线上路径
* @return
*
* @author ZHANGJL
* @dateTime 2018-02-23 14:43:18
*/
public static String ImageToBase64ByOnline(String imgURL) {
ByteArrayOutputStream data = new ByteArrayOutputStream();
try {
// 创建URL
URL url = new URL(imgURL);
byte[] by = new byte[1024];
// 创建链接
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("GET");
conn.setConnectTimeout(5000);
InputStream is = conn.getInputStream();
// 将内容读取内存中
int len = -1;
while ((len = is.read(by)) != -1) {
data.write(by, 0, len);
}
// 关闭流
is.close();
} catch (IOException e) {
e.printStackTrace();
}
// 对字节数组Base64编码
BASE64Encoder encoder = new BASE64Encoder();
return encoder.encode(data.toByteArray());
}
/**
* base64字符串转换成图片
* @param imgStr base64字符串
* @param imgFilePath 图片存放路径
* @return
*
* @author ZHANGJL
* @dateTime 2018-02-23 14:42:17
*/
public static boolean Base64ToImage(String imgStr,String imgFilePath) { // 对字节数组字符串进行Base64解码并生成图片
if (StringUtil.isEmpty(imgStr)) // 图像数据为空
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}
}
2、控制层代码
/**
* 将图片转换为base64格式
*/
byte[] img = user.getHeadIcon();
if(img!=null) {
String headIcon = Base64Util.ImageByteArrayToBase64ByLocal(img);
jsonObject.put("headIcon",headIcon);
}