在实现html2canvas截图的功能时，发现不支持“图片跨域”，这可伤脑筋了；
偶然发现如果将“在线图片资源”转换成base64后，用base64渲染，这样完美解决问题；
因为图片时跨域的，所以我们在转换过程中需要加一段代码，用来支持跨域；
image.crossOrigin = "*";
完整代码如下：
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 dataURL = canvas.toDataURL("image/png"); ?// 可选其他值 image/jpeg ???return dataURL;}function main(src, cb) { ???var image = new Image(); ???image.src = src; ???image.crossOrigin = "*"; ?// 支持跨域图片 ???image.onload = function(){ ???????var base64 = getBase64Image(image); ???????cb && cb(base64); ???}}main(‘http://wwww.test/test.png‘, function(base64){ ???console.log(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图片数据
data:image/x-icon;base64,base64编码的icon图片数据
JS 如何将“在线图片资源”转换成“base64”
原文地址：https://www.cnblogs.com/minigrasshopper/p/9042686.html