fabric.js里fabric.Image使用跨域图片在canvas导出toDataURL()失败的问题

问题

常见的在 canvas 里请求跨域图片导出时产生的跨域问题：

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

很巧的是 fabric.js 用来做 canvas 操作时，其图片导入方法 fabric.Image 也给我们提供了一个 crossOrigin 属性设定。

于是：

	const image = new Image()
	image.src = 'xxx.jpg'
	fabricImage = new fabric.Image(image, {
	        crossOrigin: 'anonymous'
	      })

这样是错误的，仍然报跨域问题。

另外，官方提供的 setCrossOrigin() 方法：

在图片上加 crossorigin 属性：

均是无效的。

解决

真正的解决关键是在导入 fabric.Image 之前的原生 Image 对象上，需要在刚设定出 Image 对象时就加跨域属性：

    const image = new Image()
    image.setAttribute('crossOrigin', 'anonymous')
   	image.src = 'xxx.jpg'
   	fabricImage = new fabric.Image(image, {
        
      })

如此一来，成功解决问题，注意先加跨域属性再设定 src 。

官方提供的跨域解决设定一言难尽。。。