当我尝试在响应头中获取具有Access-Control-Allow-Origin：*的图像的图像数据时，为什么会出现exception18？

当我尝试通过方法getImageData获取图像的像素时，我遇到了这个错误

“无法从canvas获取图像数据，因为canvas已被跨源数据污染。未捕获错误：SecurityError：DOM Exception 18”

图像在标题响应中具有Access-Control-Allow-Origin：* 。 所以，我不明白为什么我得到这个错误。 我该怎么做才能解决这个问题？

我试图将属性crossOrigin添加到图像中，但这在Safari中不起作用。 我正在处理的代码如下。

      var img = new Image(); img.onload = function() { var ctx = $('#cnv')[0].getContext('2d'); ctx.drawImage(this, 0, 0); var originalImageData = ctx.getImageData(0, 0, 300, 300); // Exception 18 }; img.src = 'http://api.thumbr.it/1f86404a001828912f295a74b8a4d337/D-lvXHFIHpY/api.thumbr.it/static/ladies-800.png/400x400c-ebrown-eframe1/thumb.jpg'; $('body').append(img);    
Example
     

Answer 1

在客户端，请务必在设置crossOrigin之前设置crossOrigin标志

 img.crossOrigin='anonymous' 

这是您的代码，其中crossorigin访问权限设置为匿名：

         
Example
     

Answer 2

我找到了另一种通过XMLHttpRequest解决这个问题的方法。 此解决方案适用于Chrome，Safari，Firefox和Opera，但不适用于IE 。 有关更多信息，请访问此页面http://jsperf.com/encoding-xhr-image-data/12 。

         
Example