Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ 问题解决方法(failed to execute goal org.apache)

推荐整理分享Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ 问题解决方法(failed to execute goal org.apache)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:failed to execute goal on,failed to execute operation,failed to execute goal,failed to execute goal on,failed to execute goal,failed to execute goal org.apache,failed to execute goal,failed to execute goal,内容如对您有帮助，希望把文章链接给更多的朋友！

最近在使用 Canvas 时，遇到了跨域问题。本文介绍如何解决这类跨域问题。

具体的错误信息如下：

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

对于跨域的图片，只要能够在网页中正常显示出来，就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步，通过getImageData()方法获取图片的完整的像素信息，则多半会出错。

那有没有什么办法可以解决这个问题呢？

在HTML5中，有些元素提供了支持CORS(Cross-Origin Resource Sharing)（跨域资源共享）的属性，这些元素包括<img>，<video>，<script>等，而提供的属性名就是crossOrigin属性。

因此，上面的跨域问题可以这么处理：

增加一个img.crossOrigin = ''即可，虽然JS代码这里设置的是空字符串，实际上起作用的属性值是anonymous。

crossOrigin可以有下面两个值：

anonymous:元素的跨域资源请求不需要凭证标志设置。

use-credentials:元素的跨域资源请求需要凭证标志设置，意味着该请求需要提供凭证。

其中，只要crossOrigin的属性值不是use-credentials，全部都会解析为anonymous，包括空字符串，包括类似'xttblog'这样的字符。

另外还有一点需要注意，那就是虽然没有crossOrigin属性，和设置crossOrigin="use-credentials"在默认情况下都会报跨域出错，但是性质上却不一样，两者有较大区别。

IE11+，Safari，Chrome，Firefox浏览器均支持，IE9和IE10会报SecurityError安全错误。