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

来源:4-1 getImageData 和 putImageData

aimeeWu

2016-03-07 13:39

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 报这个错 怎么解决

写回答 关注

11回答

  • 烈霓殇
    2020-12-14 15:39:30

    按照楼上的说法,把图片转换成base64就可以了

  • 伪类l
    2020-09-02 15:48:26

    把图片转成 base64 就不考虑跨域问题了。可以完成接下来的学习

  • 慕粉1404263948
    2017-02-19 12:21:22

    目前找到的最简单的自建 webserver 的方法就是用 python

    1、安装:linux和mac都自带python。windows需要安装一下,到 https://www.python.org/downloads/ 下载一个 2.7版,安装。

    2、运行:安装完成后,进入命令行,cd到html文件所在的目录,运行:

    python -m SimpleHTTPServer 8000

    (末尾的四位数字是端口号,如果发现冲突修改成别的数字即可,比如 9876 之类的)

    3、使用:打开浏览器,访问 http://localhost:8000/  即可。

    (如果第二步里修改了端口号,地址栏后面输入同样的端口号,例如 http://localhost:9876/ )

  • ca_xy15
    2016-10-06 16:02:32

    如果你使用的是本地图片,就要在服务器环境下运行代码;

    如果是网络图片,就添加 img.crossOrigin = "Anonymous";  这是设置图像的跨域属性



  • happyuzhou
    2016-08-26 22:05:09

    Edge可以显示

  • happyuzhou
    2016-08-26 21:59:14

    因为在canvas上放置了一张跨域的图片。

    一旦canvas发现你绘制了一张跨域的图片时,它就会认为此时的画布是"tainted"、被污染的,从而不允许你操作该图片的像素,从而防止多种类型的XSS/CSRF攻击。

    解决此问题的办法是在服务器的环境下来运行代码。


  • 欧若曦
    2016-07-26 17:17:44

    对图片进行base64编码

    image.src="base64 code"


  • 满满肥肉的夏天
    2016-05-17 15:22:41

    我也遇到同样的问题不会解决呢。。。

  • criss_lai
    2016-03-24 15:50:58

    @ 是个跨域的问题,死翘翘了,不会解决,要本地搭服务器,臣妾做不到啊

  • criss_lai
    2016-03-24 14:15:29

    我也碰到同样的问题,我使用的是本地的图片,非网上的图片

  • 说不清的一切
    2016-03-16 18:08:52

    你使用的图片是网络上的吧

Canvas玩转图像处理

canvas系列第三课,学会编写图像算法,一起玩转图像处理吧

60311 学习 · 124 问题

查看课程

相似问题