Canvas toDataURL导出图片报错， cors 限制该怎么解决

Question

现在场景是这样，我们有一个网站，需要用户选择图片文件，然后和我们的背景、提示信息合成为一张新的图片，然后导出。

在本地是可以运行的

在线上测试的时候报错，提示画布是被污染的，安全限制不能导出为图片。

// 错误提示：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    at HTMLImageElement.img_2.onload

    

我在网上找了一些相关的资料，大部分做法是给 img 标签加一个属性。

var img = new Image()

img.setAttribute("crossOrigin",'anonymous')

// img.crossOrigin = "anonymous"

// 还有的博客说这样加

img.crossOrigin = ""

img.crossOrigin = "*"

// 但是我试了都没有效果，还是报错

这里我有些不太清楚， crossOrigin 属性是给导出的 new Image() 加，还是给用户选择的跨域图片添加？

我们的 dev 环境是可以运行的，但是线上却报错，服务器方面有哪些配置会导致这个问题吗？

求解

再附一些相关的博客，
https://www.jianshu.com/p/6fe...

https://developer.mozilla.org...

https://stackoverflow.com/que...