1 Base64 → 图像

[demo1]

document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );

[demo2]

(HTML源码下)

展开HTML源码

效果：↓

2 JavaScript源码(base64图片编码 转 图片)

var dom = document.querySelector("div");

var tmpImgUrl = dom.style.background;

var base64Img = tmpImgUrl.substring(5,tmpImgUrl.length-2); // base64编码的图片数据

// base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='";//形如←←←

var imgDom = document.querySelector("#img");

imgDom.setAttribute("src", base64Img);

效果：↓

3 Base64 ← 图像

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;

}

demo1

var image = new Image();

image.src = img;

image.onload = function(){

  var base64 = getBase64Image(image);

  console.log(base64);

}

demo2

var imageDom = document.querySelector("img");

var base64 = getBase64Image(imageDom);

console.log(base64);

4 参考文献

图片⇋Base64编码转换
js将图片转换为base64 - 博客园
js 将图片转换为base64编码 yyshang - 简书

[JavaScript]Base64 ←→ 图像的相关教程结束。