在实现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图片数据
原文：https://www.cnblogs.com/minigrasshopper/p/9042686.html