canvas关于getImageData跨域问题解决方法

最新推荐文章于 2023-05-15 11:28:54 发布

转载最新推荐文章于 2023-05-15 11:28:54 发布 · 4.7k 阅读

本文探讨了在使用HTML5 Canvas的getImageData方法时遇到的跨域问题，详细解析了问题产生的原因，包括浏览器的安全策略和本地文件系统的跨域限制。提供了两种解决方案，一是调整浏览器设置禁用web安全检查，二是确保图片资源来自同源服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas关于getImageData跨域问题解决方法

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

最近在自学html5 CSS3很推荐李刚的这个书<html5、css3,js权威指南>，今天在家里测试发现 canvas中的getImageData报错

Failed to execute 'getImageData' on 'CanvasRenderingContext2D' ，因为以前出现过一次chrome 跨域访问json不了的问题，所以我知道是浏览器的配置问题 --allow-file-access-from-files就可以了，发现网上没有答案，于是我就想为什么我公司的可以，我每次公司用chrome都会出现一个提示浏览器安全性能低的提示，我就知道了，因为公司将安全性能降到最低，所以不会出现json跨域和getImageData的

问题，于是我打开浏览器，果然问题这就这里

图片：附1

解决方法1： --disable-web-security，我们在目标中添加上这一句就可以了记得中间有一个空格，然后关上浏览器，重新手动打开输入地址，（我的是本地文件html直接拖放进入，不要使用dw快捷F12打开，第一次无效，我也不知道为什么）问题解决（具体可参照图片附1），同时附上问题的原因：

1. 首先没有服务器环境（如：本地的 html网页，操作本地的图片），
    就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误。
    因为本地测试用的图片是文件夹内的，js跨域限制是不能获取非同一域名下的数据的，
    而本地的位置是没有域名的，所以浏览器都认为你是跨域，导致报错。
2. 为了阻止欺骗，浏览器会追踪 image data。
   当把一个和canvas的域不同的图片放到canvas上，这个canvas就成为 “tainted”(被污染的)，浏览器就不让你操作该canvas 的任何像素。
   是为了阻止多种类型的XSS/CSRF攻击（两种典型的跨站攻击）。

解决方法2：

将图片转换成为字符串保存在浏览器，使用时再转换回去有兴趣参考

http://blog.youkuaiyun.com/molaifeng/article/details/42293509

---------------------
作者：熏肉大饼
来源：优快云
原文：https://blog.youkuaiyun.com/w5167839/article/details/45485645
版权声明：本文为博主原创文章，转载请附上博文链接！

一、问题：在使用html5的canvas是，当用到getImageData方法获取图片信息时，会碰到跨域无法获取的情况，代码如下：

复制代码

document.getElementById("pic").onload=function(){
    var c=document.getElementById("myCanvas");     
    var ctx=c.getContext("2d");
    var img=document.getElementById("pic");
    ctx.drawImage(img,0,0,300,300);
    var imgData=ctx.getImageData(0,0,c.width,c.height);  //问题所在
    // 反转颜色
    for (var i=0;i<imgData.data.length;i+=4)
    {
        imgData.data[i]=255-imgData.data[i];
        imgData.data[i+1]=255-imgData.data[i+1];
        imgData.data[i+2]=255-imgData.data[i+2];
        imgData.data[i+3]=255;
    }
    ctx.putImageData(imgData,0,0);
};

复制代码

在chrome会提示：

"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at HTMLImageElement.document.getElementById.onload"的错误信息

在IE中会提示：

"security error！"的错误信息

二、原因：图片存储在本地时，是默认没有域名的，用getImageData方法时，浏览器会判定为跨域而报错！

三、方法：1.把图片放置在服务器中，通过服务器返回给客户端，遵循同源策略；

2.用firefox浏览器打开；

在firefox中效果如下：