照片涂抹

问题描述：

后端返回的是网络图片，canvas.toDataURL('image/png')的时候回报错，

"SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

原因：

是因为图片有跨域的问题

解决办法是：

a: img.src = dataUrl + '?v=' + Math.random(); // 处理缓存

b: img.crossOrigin = "*"; // 支持跨域图片

不仅要设置b点，还要给图片后面加上版本号，toDataURL才可以返回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 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://www.baidu.com/aa.png', function(base64){
    console.log(base64);
});