getImageData、drawImage、toDataURL 等API都是我们在使用canvas的时候常用到的。有时候我们在使用的时候，可能会遇到如：

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Failed to execute 'toDataURL' on　'HTMLCanvasElement': Tainted canvased may not be exported.

SecurityError: The operation is insecure.

No 'Access-Control-Allow-Origin' header is present on the requested resource.

等等上述的问题，都是由于 跨域 导致，那么怎么解决呢？ 有个属性叫做： crossOrigin 可以试一下。

MDN中介绍的很清楚，在HTML5中，一些 HTML 元素提供了对 CORS 的支持， 例如 <audio>、<img>、<link>、<script> 和 <video> 均有一个跨域属性 (crossOrigin property)，它允许你配置元素获取数据的 CORS 请求。

crossOrigin有以下枚举值：

关键字	描述
anonymous	对此元素的 CORS 请求将不设置凭据标志。
use-credentials	对此元素的CORS请求将设置凭证标志；这意味着请求将提供凭据。
""	设置一个空的值，如 anonymous 或 crossOrigin=""，和设置anonymous 的效果一样。

再解释一下：

默认没有crossOrigin属性，如果有crossOrigin属性并且值为use-credentials，同样也都会有跨域问题，但是两者是有区别的。

如果有crossOrigin属性，但是值不是use-credentials，那么都会被解析为anonymous

crossOrigin="anonymous"，相当于告诉服务器，你不要带任何非匿名信息过来，因此，浏览器肯定是安全的。这也就是为什么该属性能解决canvas跨域问题的原因。