Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 报这个错 怎么解决
按照楼上的说法,把图片转换成base64就可以了
把图片转成 base64 就不考虑跨域问题了。可以完成接下来的学习
目前找到的最简单的自建 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/ )
如果你使用的是本地图片,就要在服务器环境下运行代码;
如果是网络图片,就添加 img.crossOrigin = "Anonymous"; 这是设置图像的跨域属性
Edge可以显示
因为在canvas上放置了一张跨域的图片。
一旦canvas发现你绘制了一张跨域的图片时,它就会认为此时的画布是"tainted"、被污染的,从而不允许你操作该图片的像素,从而防止多种类型的XSS/CSRF攻击。
解决此问题的办法是在服务器的环境下来运行代码。
对图片进行base64编码
image.src="base64 code"
我也遇到同样的问题不会解决呢。。。
@ 是个跨域的问题,死翘翘了,不会解决,要本地搭服务器,臣妾做不到啊
我也碰到同样的问题,我使用的是本地的图片,非网上的图片
你使用的图片是网络上的吧