Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

一、总结

一句话总结:解决方案是图片设置crossOrigin属性

图片设置 :crossOrigin属性
代码片段:img.setAttribute("crossOrigin",'Anonymous')

大概意思是canvas无法执行toDataURL方法:污染的画布无法输出
经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 用浏览器打开是空的透明画布,如图

image.png

代码片段如下:

  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的更多相关文章

  1. Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    canvas绘制图片,由于浏览器的安全考虑,如果在使用canvas绘图的过程中,使用到了外域的图片资源,那么在toDataURL()时会抛出安全异常: Uncaught SecurityError: ...

  2. 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...

    问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...

  3. exception:Failed to execute 'toDataURL' on 'HTMLCanvasElement' 解决方案

      1.情景展示 当使用canvas 将图片转为base64报错信息如下: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLC ...

  4. 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 ...

  5. 使用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 ...

  6. Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node ……

    解决办法是加一个等待时间即可解决问题: setTimeout(function () { you code }, );

  7. Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案

    添加跨域条件   crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...

  8. 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 ...

  9. three.js_ "Failed to execute 'texImage2D' on 'WebGLRenderingContext': tainted canvases may not be loded."

    这个报错是请求图片跨域了. 1.当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图. 2.假设我们获取的是图片在服务器上的路径然后我们用 加载贴图到这里都是没有问题当我们在贴图加载 ...

随机推荐

  1. 解决Vue引入百度地图JSSDK:BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  2. 洛谷 P1052 过河 (离散化+dp)

    dp非常好想, f[i] = min(f[i-len] + stone[i]) s <= len <= t 然后因为L非常大,所以我就不知道该怎么搞了 我看到m只有100,而L有1e9,我 ...

  3. SSIS安装以及安装好找不到商业智能各种坑

    原文:SSIS安装以及安装好找不到商业智能各种坑 这两天为了安装SSIS,各种头疼.记录一下,分享给同样遇到坑的.. 安装SSIS需要几个步骤. 先说一下我的情况,安装SQL的时候,一直默认下一步,没 ...

  4. 【Henu ACM Round#24 B】Gargari and Bishops

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果写过n皇后问题. 肯定都知道 某个点(i,j)和它在同一条对角线上的点分别是i+j的值和i-j的值相同的点. 然后会发现选择的两 ...

  5. 更新 hadoop eclipse 插件

    卸载hadoop 1.1.2插件.并安装新版hadoop 2.2.0插件. 假设直接删除eclipse plugin文件夹下的hadoop 1.1.2插件,会导致hadoop 1.1.2插件残留在ec ...

  6. 捕捉到来自宇宙深空的神奇X-射线信号

    请看下图: 这是专门用于捕捉X-射线信号的航天望远镜,约有5吨重,执行轨道距离地面大约有5万多公里.6月24日,美国宇航局NASA宣布,这台航天望远镜从银河系深处捕捉到一种波长非常特殊的神奇X-射线信 ...

  7. angularjs作用域和函数调用

    <!DOCTYPE HTML> <html ng-app> <head> <meta http-equiv="Content-Type" ...

  8. hpuoj--校赛--爬楼梯(模拟)

    问题 E: 感恩节KK专场--爬楼梯 时间限制: 1 Sec  内存限制: 1000 MB 提交: 382  解决: 89 [提交][状态][讨论版] 题目描述 来机房比赛的时候大家都会爬楼梯,但是每 ...

  9. [JZOJ3382] [NOIP2013模拟] 七夕祭 解题报告

    Description 七夕节因牛郎织女的传说而被扣上了「情人节」的帽子.于是TYVJ今年举办了一次线下七夕祭.Vani同学今年成功邀请到了cl同学陪他来共度七夕,于是他们决定去TYVJ七夕祭游玩. ...

  10. RecyclerView让列表嵌套如此简单

    平常开发时,相信像这样的页面,大家一定是遇到过的.这里比较坑爹的地方在于呢:列表嵌套.订单列表中的每一项,都包含一个商品列表.像这种需求,大家会如何实现呢? 这里呢,说一下我自己的思路,我没有使用列表 ...