Mein Code läuft einwandfrei auf localhost, aber nicht auf der Website.
Ich erhalte diesen Fehler von der Konsole für diese Zeile .getImageData(x,y,1,1).data:
Uncaught SecurityError: 'getImageData' konnte nicht auf 'CanvasRenderingContext2D' ausgeführt werden: Die Leinwand wurde durch ursprungsübergreifende Daten beeinträchtigt.
Teil meines Codes:
jQuery.Event.prototype.rgb=function(){ var x = this.offsetX ||. (this.pageX - $(this.target).offset().left),y = this.offsetY ||. (this.pageY - $(this.target).offset(). Spitze); if (this.target.nodeName!=="CANVAS")return null; return this.target.getContext('2d').getImageData(x,y,1,1).data; } Hinweis: Meine Bild-URL (src) stammt von einer Subdomain-URL
正如其他人所说，您通过从跨源域加载来“污染”画布。
https://developer.mozilla.org/en-US/docs/ HTML/CORS_Enabled_Image
但是，您可以通过简单地设置来防止这种情况：
只有当远程服务器正确设置以下标头时，这才有效：
使用“直接链接”选项时的Dropbox 文件选择器这就是一个很好的例子。我在oddprints.com上使用它来将远程保管箱图像网址中的图像吸到我的画布中，然后将图像数据提交回我的服务器。全部用 JavaScript 编写