javascript實現網頁截圖操作介紹

在當前javascript還不能夠實現網頁截圖操作，如果將來可以實現，那麼也是瀏覽器提供了對應的介面。

當前我們的實現方式是通過拿到畫素點的資訊來”拼湊”圖片。

常見的截圖方式:

phantomJS它提供了一個截圖函式，通過它可以整屏獲取頁面截圖，而且他支援的格式也比較多：JPG/PNG/GIF/PDF。通過簡單的兩句命令就可以把一個網頁擷取下來：

[JavaScript] 純文字檢視 複製程式碼
// render.js
var webPage = require('webpage');
var page = webPage.create();
 
page.viewportSize = { width: 1920, height: 1080 };
page.open("http://www.taobao.com", function start(status) {
  page.render('taobao_home.jpeg', {format: 'jpeg', quality: '100'});
  phantom.exit();
});

安裝 phantomjs 之後執行下上面的檔案：

[JavaScript] 純文字檢視 複製程式碼
phantomjs render.js

一張寬度很窄的淘寶首頁圖就儲存到了同目錄下的 taobao_home.jpeg 中。也有使用phantomjs做了很多有意思的東西，比如每隔 100ms 截圖，然後對比影像之間的差異，分析網頁的載入情況和效能問題，甚至做網頁的監控。好吧，話題收回來，繼續說說其他的截圖方式。

前端截圖方案：

能夠匯出圖片的，目前只有 canvas。頁面上的元素，除了圖片、視音訊、SVG等，其他都是文字，都可以使用 css 樣式變換出來。我們知道，在 canvas 中是可以繪製圖片和文字的，那麼問題就很好解決了。

（1）.遍歷頁面的所有元素，提取DOM數。

（2）.獲取渲染之後的每個 DOM 節點的內聯、外鏈 CSS 屬性

（3）.將樣式轉換成 canvas 的屬性，利用 offset 等屬性輔助擺放位置，將節點對應到 canvas 上。

這個方案比較粗糙，但是對於簡單的頁面，以上操作就能匯出一張幾乎與原狀一模一樣的圖片。當然，我們想到的，也有人實現出來了，html2canvas 就是一個關注度很高的 js 截圖庫，它考慮的內容會更多更全面。下面是簡單的實現程式碼片段:

[JavaScript] 純文字檢視 複製程式碼
html2canvas(document.body).then(function (canvas) {
  canvas.id = 'screenshotCanvas';
  document.body.appendChild(canvas);
});

此時，頁面的截圖已經 append 到了 body 中。canvas 提供了匯出圖片的函式：

[JavaScript] 純文字檢視 複製程式碼
var can = documeng.getElementById("screenshotCanvas");
var imgDataURI = can.toDataURL('image/png');