JS 如何将“在线图片资源”转换成“base64”

在实现html2canvas截图的功能时，会报下面的错误；

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

原因一：图片资源跨域

解决方法：将“跨域图片资源”转换成base64后，用base64渲染img标签，这样完美解决问题；

如何将“跨域图片”转换成base64呢？原理很简单，将img绘制成canvas，再将canvas转换成base64的img流；

因为图片是跨域的，所以我们在转换过程中需要加一段代码，用来处理跨域；

image.crossOrigin = "*";
// image.crossOrigin = 'Anonymous';  // 这个也可以

 

继续执行，发现偶尔还是报错，麻麻个蛋……继续填坑

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

原因二：图片url缓存

在这里找到的方法：https://stackoverflow.com/questions/46609800/canvas-crossorigin-anonymous-cors-chrile-mac-osx

// image.src = src;  // 起初是这样的
image.src = src + '?v=' + Math.random();  // 大佬是这样的，说要加版本号，处理缓存

为啥处理缓存就好了呢？原因我还真的不清楚，暂时遗留问题吧。

 

完整代码如下： 

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 + '?v=' + Math.random(); // 处理缓存
    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图片数据