canvas画图失败之图片跨域问题

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at img.onload (eval at window.getCodeValue (webpack:///./base/magicBase.js?), :18:20)

• 错误示意：canvas无法执行toDataURL方法：画布被污染，无法输出：

受限于 CORS 策略，图片可能会存在跨域问题，虽然可以使用图像，但是绘制到画布上会污染画布，一旦一个画布被污染,就无法提取画布的数据，比如无法使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候会抛出一个安全错误

• 解决方法：

给图片设置crossOrigin属性，代码为：img.setAttribute("crossOrigin",'Anonymous')

    //将图片转为base64格式
    function(formData){
	var logoUrl = formData.logoUrl;
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");
	var base64 = '';
	var img = new Image();   
	img.src = logoUrl;
        //解决图片跨域问题
	img.setAttribute("crossOrigin",'Anonymous')
        //图片加载完后再进行canvas绘图
	img.onload = function(){
		var width = img.width;
                var height = img.height;
		canvas.width = width;
                canvas.height = height;
                //设置绘图背景色
		ctx.fillStyle = 'rgba(255,255,255,0)';
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		ctx.drawImage(img, 0, 0, width, height);
		base64 = canvas.toDataURL("image/jpeg");
		canvas.width = canvas.height = 0;
	}
   }