js通过base64编码显示图片
js通过base64编码显示图片
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求Data URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
<img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img layui-upload-img" id="userImge" name="userImge" >
<button type="button" class="layui-btn" id="upImage">更换头像button>
----------------------------------------------------
//通过回调函数返回一个图片的字节数组，在JavaScript进行解析还原成图片
$.post("${ctx}/web/UserInforServlet",function(obj){
if(obj.data[0].bytes.length>0){
console.log(obj.data[0].bytes);
//js通过读取字节数组转换为字符串
var strBase64 = arrayBufferToBase64(obj.data[0].bytes);//转换字符串
//图片链接（base64） ;
$("#userImge").attr("src","data:image/png;base64,"+strBase64);
}
},"json");
function arrayBufferToBase64(buffer){
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
//将 Unicode 编码转换为一个字符串:
//fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
binary += String.fromCharCode(bytes[i]);
}
//window.btoa()：将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串.
return window.btoa(binary);
}
服务器传过来的图片的字节数组：
base64编码的优缺点：
【1】优点：
1）减少了http请求
2）没有跨域的问题
3）.直接放在路径里不需要清理缓存
【2】缺点：
1）IE6/7不支持(不过这个问题不大)
2）base64本质上是将图片以二进制的字母展示，字符量过大无形中增加了css/html文件的大小