- 注意点：
tempImage.onload = function(){
var baseSrc = getBase64Image(tempImage);
var pHtml = "<img src="+baseSrc+"/>";
o.html(pHtml);
}
这一部是一定要写的，图片路径加载需要时间，所以直接这样写的话：
var baseSrc = getBase64Image(tempImage);
会由于没加载到路径，值为空。 -
但遇到跨域的问题时，需要后台同事配置配置一下：
image.png
其实下面这一句是不起作用的：
tempImage.crossOrigin = 'anonymous';
图片地址是阿里云的话，可能是阿里云oss访问图片出现跨域问题：
需要设置一下CDN
//图片路径转成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;
}
var o = $('#wx');
var tempImage = new Image();
tempImage.crossOrigin = 'anonymous';
tempImage.src = appletCode;
tempImage.onload = function(){
var baseSrc = getBase64Image(tempImage);
var pHtml = "<img src="+baseSrc+" />";
o.html(pHtml);
}
