zoukankan      html  css  js  c++  java
  • php将html页面截图并保存成图片

    采用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/



    作者:三丰张
    链接:https://www.jianshu.com/p/6fe06667b748
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    Java Lambda 表达式 对 Map 对象排序
    比较两个list对象是否相同
    ubuntu redis 自启动配置文件(关机有密码)
    spring中订阅redis键值过期消息通知
    网站架构之性能优化(转)
    Json转Java Bean
    spring mvc 4 校验
    java @ResponseBody返回值中去掉NULL字段
    合并两个java bean对象非空属性(泛型)
    spring mvc 删除返回字符串中值为null的字段
  • 原文地址:https://www.cnblogs.com/mverting/p/9325336.html
Copyright © 2011-2022 走看看