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';