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图片数据

----------------------------------------------------

//通过回调函数返回一个图片的字节数组，在JavaScript进行解析还原成图片

$.post("${ctx}/web/UserInforServlet",function(obj){

if([0].>0){

([0].bytes);

//js通过读取字节数组转换为字符串

var strBase64 = arrayBufferToBase64([0].bytes);//转换字符串

//图片链接（base64） ;

$("#userImge").attr("src","data:image/png;base64,"+strBase64);

}

},"json");

function arrayBufferToBase64(buffer){

var binary = '';

var bytes = new Uint8Array(buffer);

var len = ;

for (var i = 0; i < len; i++) {

//将 Unicode 编码转换为一个字符串:

//fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。

binary += (bytes[i]);

}

//()：将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串.

return (binary);

}

服务器传过来的图片的字节数组：

base64编码的优缺点：

【1】优点：

1）减少了http请求

2）没有跨域的问题

3）.直接放在路径里不需要清理缓存

【2】缺点：

1）IE6/7不支持(不过这个问题不大)

2）base64本质上是将图片以二进制的字母展示，字符量过大无形中增加了css/html文件的大小

秒客网

js通过base64编码显示图片

相关文章