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圖片數據