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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。