未捕获的SecurityError：无法执行＆＃39; getImageData＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：画布受到跨源数据的污染

Question

我在Chrome和Opera浏览器中收到此错误：

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

代码在Internet Explorer，Mozilla Firefox和Safari中运行良好。但我需要在Chrome和Opera中修复它。请帮我找一个解决方案来解决这个问题？

我在此行收到此错误

imgData = ctx.getImageData(x1,y1,w,h);

Answer 1

可能这会有所帮助，因为你已经提到了交叉原点所以试试这个，

 var UimageObj = new Image();

必须设置crossOrigin才能保存画布数据。源图像应access-control-allow-origin设置为*或选定的域

UimageObj.crossOrigin = 'anonymous';   // crossOrigin attribute has to be set before setting src.If reversed, it wont work.  
UimageObj.src = obj_data.srcUser;

希望它有所帮助。

Answer 2

当您使用以下网址从file://path/to/your/file.html加载html文件时，Google Chrome和Opera会引发错误，包括：imgData = ctx.getImageData(x1,y1,w,h);

解决方案很简单：启动Web服务器（apache，nginx）将您的html文件放在Web服务器的某处并加载您的html文件：http://localhost/somewhere/file.html