Canvas 图像跨域bug

问题背景

最近帮朋友解决一个下载文件的Bug，功能是vue开发的一个网页展示人员信息包含人员头像，需要将网页转成PDF下载。开发人员利用html2canvas直接将dom节点转成图像并保存到pdf里面下载，于是在canvas.toDataURL时出现错误Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。
出错代码：

html2Canvas(targetDom, {
    allowTaint: true,
}).then(function (canvas) {
     ....
     let pageData = canvas.toDataURL("image/jpeg", 1.0); // 保存canvas图像，出错代码
     ...
     PDF.save(_this.$route.query.title + ".pdf"); // 保存pdf文档，本地下载pdf文件
});

修复

从前端报错来看是跨域问题，查看源码，图片已经添加了跨域信息，且服务器已经对跨域做了处理，即服务器已经支持跨域。

imgDom.setAttribute("crossOrigin", 'Anonymous')

经过漫长的百度、Google之后，最终在stackoverflow找到解决办法：

html2Canvas(targetDom, {
	allowTaint: true,
	useCORS: true //添加代码
})

html2Canvas传入参数增加useCORS: true，然后文件顺利诞生。

至于原理：下回分解