解决getImageData()错误:画布被跨域数据污染的问题
P粉343141633
P粉343141633 2023-08-29 12:52:11
[HTML讨论组]

我的代码在本地主机上运行得很好,但在网站上却无法运行。

我从控制台收到此错误,对于这一行 .getImageData(x,y,1,1).data:

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

我的代码的一部分:

jQuery.Event.prototype.rgb=function(){
        var x =  this.offsetX || (this.pageX - $(this.target).offset().left),y =  this.offsetY || (this.pageY - $(this.target).offset().top);
        if (this.target.nodeName!=="CANVAS")return null;
        return this.target.getContext('2d').getImageData(x,y,1,1).data;
    }

注意:我的图像网址 (src) 来自子域网址

P粉343141633
P粉343141633

全部回复(1)
P粉465675962

正如其他人所说,您通过从跨源域加载来“污染”画布。

https://developer.mozilla.org/en-US/docs/ HTML/CORS_Enabled_Image

但是,您可以通过简单地设置来防止这种情况:

img.crossOrigin = "Anonymous";

只有当远程服务器正确设置以下标头时,这才有效:

Access-Control-Allow-Origin "*"

使用“直接链接”选项时的 Dropbox 文件选择器这就是一个很好的例子。我在 oddprints.com 上使用它来将远程保管箱图像网址中的图像吸到我的画布中,然后将图像数据提交回我的服务器。全部用 JavaScript 编写

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号