base64编码与图片之间相互转换

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一
一、将base64转换成图片
只需要在img 标签中引入即可，注意要加上标明前缀（data:image/png;base64），否则并不知道，这串代码是干啥的
如：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="">
二、将图片转换成base64
通过canvas.toDataURL将图片转换成base64，需要注意的是，在转换成 dataURL 前必须先确保图片成功加载到，于是.toDataURL()方法应该写在的onload异步事件中。

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
       //var img = "http://127.0.0.1/base64/1.jpg";
       function getBase64Image(img) {
           var canvas = document.createElement("canvas");
           canvas.width = img.width;
           canvas.height = img.height;

           var ctx = canvas.getContext("2d");
           ctx.drawImage(img, 0, 0, img.width, img.height);
           var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
           var dataURL = canvas.toDataURL("image/"+ext);
           return dataURL;
       }
       var image = new Image();
       image.crossOrigin = 'anonymous';
       image.src = img;
       image.onload = function(){
           var base64 = getBase64Image(image);
           console.log(base64);
       }

跨域问题
当img的地址存在跨域时，而且服务器不允许跨域，这样是转换不了的，当服务器允许跨域时，前端的图片也要设置跨域image.crossOrigin = 'anonymous';

 

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。

在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

 

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

把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。