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 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。