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 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。