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文件的大小