canvas生成图片toDataURL报错(Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasEl)

现象：在使用canvas的toDataURL（）方法时，控制台有时会报错：Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
原因：这是由于之前由drawImage（）向canvas导入的图片跨域而导致的。
解决方法：

1、在引用图片之前打开跨域资源允许权限（一定要注意顺序）：

var img=new Image;
img.setAttribute('crossOrigin', 'anonymous') //关键
img.src = url + '?time=' + new Date().valueOf();
img.src="图片地址";

2、存放图片地址的服务器也要开启跨域允许权限，不然会报错：No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

如Apache设置：
①.打开LoadModule headers_module modules/mod_headers.so

②.在虚拟主机内加上 Header set Access-Control-Allow-Origin *

总结

跨域图片能正常裁剪（图片未转化成base64），应该满足三个条件：

1，img元素中设置crossorigin属性
2，图片允许跨域，设置响应头Access-Control-Allow-Origin
3，使用js方式请求图片资源, 需要避免使用缓存，设置url后加上时间戳，或者http头设置Cache-Control为no-cache

最后贴上我canvas绘制图片，画线最后生成图片的代码

<div class="jiepingCanvas" id="jtCs"  v-show="dialogJPG"><canvas id="mycanvas" ref="mycanvas" width="848" height="508"></canvas><div class="yesNo"><div class="jtYes" @click="jtSure()"><img src="../common/comImg/yes.png" alt=""></div><div class="jtYes" @click="jtCancel()"><img src="../common/comImg/no.png" alt=""></div></div><div class="tipsjt">提示：图片可以进行画线操作</div>
</div>

data() {return {onoffjt:false,oldxjt:0,oldyjt:0,ctxjt:'',linecolorjt:'',linwjt:8,onArrjt:[],endArrjt:[],ctxjt:"",huajt:false,canvasJT:""}
}//初始化画布
canvasInit(){var that=thisvar imgUrl='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583035764,1571388243&fm=26&gp=0.jpg'that.dialogJPG=true//  获取canvasthat.canvasJT = document.getElementById("mycanvas")var a = setInterval(() =>{that.canvasJT = document.getElementById("mycanvas")if(!that.canvasJT){return false} else {clearInterval(a)that.ctxjt = that.canvasJT.getContext('2d')var img = new Image()img.src = imgUrl+"?timeStamp="+new Date();img.setAttribute("crossOrigin",'anonymous')img.onload = function(){if(img.complete){//  根据图像重新设定了canvas的长宽that.canvasJT.setAttribute("width",844)that.canvasJT.setAttribute("height",504)//  绘制图片that.ctxjt.drawImage(img,0,0,844,504)that.initjt()}}that.dialogJPG=true}},1)
}//开始画线
initjt(){//画一个黑色矩形this.ctxjt.fillStyle="transparent";this.ctxjt.fillRect(0,0,848,508);//按下标记this.onoffjt=false;this.oldxjt=0;this.oldyjt=0;this.linecolorjt=this.linecolor;//宽度默认为8this.linwjt=8;//鼠标移动事件，事件绑定this.canvasJT.addEventListener("mousemove",this.drawjt,true);this.canvasJT.addEventListener("mousedown",this.downjt,false);this.canvasJT.addEventListener("mouseup",this.upjt,false);
},
//鼠标按下事件
downjt(event){if(this.huajt==true){this.onoffjt=false}else{this.onoffjt=true;this.oldxjt=event.pageX-this.canvasJT.getBoundingClientRect().left;this.oldyjt=event.pageY-this.canvasJT.getBoundingClientRect().top;console.log(this.oldxjt,this.oldyjt,'event')}
},
//鼠标绘制线条
drawjt(event){if(this.onoffjt==true){var newxjt=event.pageX-this.canvasJT.getBoundingClientRect().left;//getBoundingClientRect方法是边框距离浏览器的距离var newyjt=event.pageY-this.canvasJT.getBoundingClientRect().top;// console.log(newx,newy,'000')this.ctxjt.beginPath();this.ctxjt.moveTo(this.oldxjt,this.oldyjt);this.ctxjt.lineTo(newxjt,newyjt);// console.log(newx);this.ctxjt.strokeStyle=this.linecolorjt;this.ctxjt.lineWidth=this.linwjt;this.ctxjt.lineCap="round";this.ctxjt.stroke();this.oldxjt=newxjt;this.oldyjt=newyjt;let xy={x:this.oldxjt,y:this.oldyjt}this.onArrjt.push(xy)}},
//鼠标抬起事件
upjt(){this.onoffjt=false;if(this.onArrjt.length>0){this.endArrjt.push(this.onArrjt)this.onArrjt=[]}
},
//点击确认生成图片
jtSure(){let dataURL = document.getElementById('mycanvas')let dataURLs=dataURL.toDataURL("images/png")let params = {data: dataURLs,compid: 30,hzm:'png'};postUpFile(params).then(res => {let { ReturnCode, Data } = res;if (ReturnCode == 200) {let DataUrl = Data.Url;console.log(DataUrl,'DataUrl路径')let msg=this.nickName+'#&$'+DataUrllet senBtnws={order:enumPack.enum_msg.drawImage,uid:Number(this.option.uid),msg:msg,device:4}this.handdleMsg(JSON.stringify(senBtnws))this.stepArray.push(DataUrl)} });this.dialogJPG=falselet c=document.getElementById("mycanvas");  let cxtjt=c.getContext("2d");  cxtjt.clearRect(0,0,c.width,c.height);
},
//点击取消清除画布
jtCancel(){this.dialogJPG=falselet c=document.getElementById("mycanvas");  let cxtjt=c.getContext("2d");  cxtjt.clearRect(0,0,c.width,c.height);
}
}

以上参考了很多大神的文章
如：https://www.cnblogs.com/sunala/p/7085525.html https://segmentfault.com/q/1010000008648867