zoukankan      html  css  js  c++  java
  • 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')

    大概意思是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

     
  • 相关阅读:
    素数路径Prime Path POJ3126 素数,BFS
    Fliptile POJ3279 DFS
    Find the Multiple POJ1426
    洗牌Shuffle'm Up POJ3087 模拟
    棋盘问题 POJ1321 DFS
    抓住那只牛!Catch That Cow POJ3278 BFS
    Dungeon Master POJ2251 三维BFS
    Splitting into digits CodeForce#1104A
    Ubuntu下手动安装Nvidia显卡驱动
    最大连续子序列和
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9588755.html
Copyright © 2011-2022 走看看