Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
一、总结
一句话总结:解决方案是图片设置crossOrigin属性
图片设置 :crossOrigin属性
代码片段:img.setAttribute("crossOrigin",'Anonymous')
经google 发现原来是受限于 CORS 策略,会存在跨域问题,虽然可以使用图像(比如append到页面上)但是绘制到画布上会污染画布,一旦一个画布被污染,就无法提取画布的数据,比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候 会抛出一个安全错误
1、如何弄图片加载完再做其它操作?
img的onload方法
img.onload = function(){//图片加载完,再draw 和 toDataURL
ctx.drawImage(img,0,0);
base64 = canvas.toDataURL("image/png");
};
2、本地测试出现Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported如何解决?
一放到服务器上面就好了,这样就不存在什么跨域问题了
3、Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported出现的原因是什么?
大概意思是canvas无法执行toDataURL方法:污染的画布无法输出。
经google 发现原来是受限于 CORS
策略,会存在跨域问题,虽然可以使用图像(比如append到页面上)但是绘制到画布上会污染画布,一旦一个画布被污染,就无法提取画布的数据,比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候
会抛出一个安全错误
二、解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
1:背景
最近在做一个图片内容识别的项目,采用的是阿里巴巴的付费接口。大致流程为:
1:用户上传图片
2:将图片转为base64的格式发送给阿里的接口
3:阿里接口返回图片的内容信息
2:遇到的问题
这里边第二步转base64 ,我采用html5的canvas,将图片绘制到画布上,然后用canvas的 toDataURL 方法。
但是在图片转base64的过程中遇到了两个问题,
- 1:图片无法绘制,转成的base64 用浏览器打开是空的透明画布,如图

代码片段如下:
var canvas=document.getElementById("canvas"),//获取canvas
ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
img = new Image(),//创建新的图片对象
base64 = '' ;//base64
img.src = 'http://www.xxxx.png';
ctx.drawImage(img,0,0);
base64 = canvas.toDataURL("image/png");
这个时候我想到问题应该是 图片还没加载完毕 就已经绘制了,既然是这样,那么修改为以下:
var canvas=document.getElementById("canvas"),//获取canvas
ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
img = new Image(),//创建新的图片对象
base64 = '' ;//base64
img.src = 'http://www.xxxx.png';
img.onload = function(){//图片加载完,再draw 和 toDataURL
ctx.drawImage(img,0,0);
base64 = canvas.toDataURL("image/png");
};
修改完毕我正要打算喝杯水庆祝一下,一刷新页面,一口老血喷了出来,chrome控制台又报错如下:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
大概意思是canvas无法执行toDataURL方法:污染的画布无法输出,请原谅我的灵魂翻译。
经google 发现原来是受限于 CORS 策略,会存在跨域问题,虽然可以使用图像(比如append到页面上)但是绘制到画布上会污染画布,一旦一个画布被污染,就无法提取画布的数据,比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候 会抛出一个安全错误
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
具体详情附上一个链接非常详细如下:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image,非常值得一看,个人理解可能不到到位,还是建议读读这个链接。
解决方案:
图片设置 :crossOrigin属性
代码片段:img.setAttribute("crossOrigin",'Anonymous')
完整代码:
``
var canvas=document.getElementById("canvas"),//获取canvas
ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
img = new Image(),//创建新的图片对象
base64 = '' ;//base64
img.src = 'http://www.xxxx.png';
img.setAttribute("crossOrigin",'Anonymous')
img.onload = function(){//图片加载完,再draw 和 toDataURL
ctx.drawImage(img,0,0);
base64 = canvas.toDataURL("image/png");
};
stackoverflow上解决方案:
地址:https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
Tips:如果遇到其他canvas 关于SecurityError 的问题,也可以尝试一下这个解决方法。
另外经过多次搜索,总结了几个小窍门
1:使用google 。baidu搜索的都是转来转去的几篇文章,干扰太大。
2:首先搜索bug之家 :stackoverflow,总有解决你的bug的方案,链接:https://stackoverflow.com/
3:web文档之家:mozilla的web文档 ,非常权威,非常详尽。链接:https://developer.mozilla.org/en-US/
参考:解决 canvas 将图片转为base64报错: Uncaught DOMException:... - 简书
https://www.jianshu.com/p/6fe06667b748
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported的更多相关文章
- Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常: Uncaught SecurityError: ...
- 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...
问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...
- exception:Failed to execute 'toDataURL' on 'HTMLCanvasElement' 解决方案
1.情景展示 当使用canvas 将图片转为base64报错信息如下: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLC ...
- wordpress 点击文章图片 不能编辑(chrome下面) wordpress Uncaught DOMException: Failed to execute 'setBaseAndExtent' on 'Selection': There is no child at offset 1.
说明:在chrome下面,编辑文章插入的图片,点击到图片上面,没有菜单显示. 报错: tinymce.min.js:10 Uncaught DOMException: Failed to execut ...
- 使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Th ...
- Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node ……
解决办法是加一个等待时间即可解决问题: setTimeout(function () { you code }, );
- Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案
添加跨域条件 crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...
- mui.min.js:7 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load
mui框架做的微信公众号网页,在上传数据的时候报了这个错,async: true,//将false改为true就可以了 https://blog.csdn.net/liuzp111/article/d ...
- three.js_ "Failed to execute 'texImage2D' on 'WebGLRenderingContext': tainted canvases may not be loded."
这个报错是请求图片跨域了. 1.当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图. 2.假设我们获取的是图片在服务器上的路径然后我们用 加载贴图到这里都是没有问题当我们在贴图加载 ...
随机推荐
- Swagger 生成 PHP API 接口文档
Swagger 生成 PHP API 接口文档 Lumen微服务生成Swagger文档 1.概况 有同学反馈写几十个接口文档需要两天的工作量, 随着多部门之间的协作越来越频繁, 维护成本越来越高, 文 ...
- iview中单击行,使得checkbox状态的方法
直接贴代码,这是一组jquery全选,全不选,反选代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- Vue内置指令
v-text 类型: string用法: 更新元素的 textContent.如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值. v-html 类型: stri ...
- python购物车系统
购物车系统模拟:product_list = [ ('java',100), ('python',200), ('键盘',500), ('电脑',4000), ('mac Book',7000),]S ...
- WPF 一个空的 WPF 程序有多少个窗口
原文:WPF 一个空的 WPF 程序有多少个窗口 好多小伙伴说 WPF 的程序有五个窗口,但是我尝试使用了 EnumThreadWindows 去获取的时候居然拿到了 10 多个窗口 在 WPF 内部 ...
- springMVC 配置jdbcTemplate连接Oracle数据库出错
springMVC 配置jdbcTemplate连接Oracle数据库出错 错误信息: log4j:WARN No appenders could be found for logger (org.s ...
- HDOJ 5008 Boring String Problem
后缀数组+RMQ+二分 后缀数组二分确定第K不同子串的位置 , 二分LCP确定可选的区间范围 , RMQ求范围内最小的sa Boring String Problem Time Limit: 6000 ...
- 改动Android设备信息,如改动手机型号为iPhone7黄金土豪版!
首先你的手机必需要有ROOT权限,误操作有风险需慎重 请先开启手机的USB调试,防止手机改动后无法启动时导致的无法修复 1.假设你是在手机上改动,直接使用RE文件管理器,编辑/system/build ...
- 本地代码中使用Java对象
通过使用合适的JNI函数,你可以创建Java对象,get.set 静态(static)和 实例(instance)的域,调用静态(static)和实例(instance)函数.JNI通过ID识别域和方 ...
- mDNS原理的简单理解——每个进入局域网的主机,如果开启了mDNS服务的话,都会向局域网内的所有主机组播一个消息,我是谁,和我的IP地址是多少。然后其他也有该服务的主机就会响应,也会告诉你,它是谁,它的IP地址是多少
MDNS协议介绍 mDNS multicast DNS , 使用5353端口,组播地址 224.0.0.251.在一个没有常规DNS服务器的小型网络内,可以使用mDNS来实现类似DNS的编程接口.包格 ...