用Javascript開發網頁截屏插件

實現思路用html2canvas.js將元素轉換成canvas,在將canvas轉成圖片。

html2canvas(document.body, {
    onrendered: function(canvas) {
    //將canvas轉成base64
      console.log(canvas.toDataURL());
    }
});

最後將base64的數據賦值給a標籤的href屬性，而且給a標籤加上downlaod屬性便可實現下載。

html2canvas.js將元素轉成canvas的原理好像是經過svg實現的，若是你感興趣能夠研究一下。

若是想實現通用的網站截圖工具，那麼能夠製做成一個chrome插件，這裏我已經寫好了，須要的能夠下載。

源碼下載

插件下載

寫插件的時候遇到一個問題，就是在測試環境下，content_scripts中向browser_action中發送數據，但在browser_action中並無響應它的事件，我打開它的控制檯刷新才執行了。