網頁截圖js（網頁截圖截長圖）

本文目錄一覽：

• 1、如何用nodejs去做網頁截圖
• 2、怎麼使用node.js進行快速截圖
• 3、如何用 js 做網站截圖

如何用nodejs去做網頁截圖

很多情況下，我們都需要在電腦上做一些截圖的操作。有哪些常用的截圖方法呢？

1、按鍵盤上的print screen 鍵：這個方法很麻煩，估計很少人用吧！

如果有如下需求：

1、截取一個網頁，也就是一個滾動窗口的所有內容；

2、需要重複截取屏幕上的某一個固定區域，比如一個窗口截圖一次後，做了一些修改，要重複截取一次，標識改變的地方；

3、在截圖上畫矩形框、氣泡框、箭頭，加漢字等

這樣的需求，QQ截圖雖然可以實現，但是那就太麻煩了，所以今天給大家推薦一款快捷好用的截圖軟體，叫做PicPick

軟體安裝包不大，開啟後佔用約25MB內存，所以即使設定為開機啟動，也不會造成太大的性能影響。同時，這款軟體原生支持全中文，並且對於個人及家庭用戶是免費的，也不用考慮是否需要漢化或者破解之類的問題。

工具/原料

PicPick

windows

軟體主界面介紹

1首先需要下載此軟體，截止2013-11-06，最新的版本應該是3.2.8。安裝過程中，會要求安裝另一個系統優化的軟體，大家直接拒絕就可以了

2安裝完畢後，此軟體界面如圖，主要的功能也都體現在主界面上了。

右邊的實用工具就不多介紹了，一看就明白，支持「屏幕取色」、「調色」、「放大鏡」、「標尺」、「坐標軸」、「量角器」和「白板」功能。絕對是設計師和PPTer的好幫手。

主界面左下方的截圖工具才是重點，介紹如下：

1、全屏：當前整個屏幕

2、窗口控制項：使用這個截圖功能的時候，會出現一個紅框，單擊滑鼠，紅框範圍內的窗口就會被截取了

3、滾動窗口：比如一個很長的網頁，支持一次性截取為圖片。雖然很多瀏覽器都支持，但是這個軟體還支持比如IE之類的瀏覽器，很實用。

4、矩形區域：最常用的，截取一個矩形框中的內容

5、固定區域：截取某一個固定區域

6、任意形狀：比如截圖一個圓形啊、心形啊之類的都可以

7、重複上次截取：這才是真正的最實用的功能，可以把上一次截取的區域再截取一次，超級好用

截圖步驟

1PicPick軟體截圖，有如下的方法：

1、主界面截圖：就是在如下界面上，選擇相應的功能

2、在工具欄托盤中，單擊PicPick的圖標，選擇「截取屏幕」

3、使用快捷鍵，具體的鍵位設定請參見軟體的設置界面，圖片中是我最常用的功能和自定義的快捷鍵

4、在編輯圖片的窗口，左上角的文件菜單中，選擇截取屏幕

圖片修改

1截圖之後會自動打開圖片編輯的窗口，如圖，最常用的文字、矩形框等工具都在界面最上方，使用方法也很簡單，單擊相應的圖形即可

其他設置

1建議勾選該軟體的如下設置，會讓軟體更好用

2建議讓軟體開機自動啟動即可，因為不佔太多內存，功能也足夠強大

怎麼使用node.js進行快速截圖

使用node-webshot進行網頁截圖

用到的npm模塊有yargs和node-webshot，關於yargs的文章參考這裡 從零開始打造個人專屬命令行工具集——yargs完全指南 。

node-webshot是調用phantomjs來生成網頁截圖的，phantomjs是非常有名的npm項目，相當於一個腳本版的WebKit瀏覽器 ，通過phantomjs可以使用腳本 和網頁進行交互，所以phantomjs經常用來進行網頁自動化測試。

phantomjs會和普通的瀏覽器一樣載入完整的網頁內容，然後在內存裡面進行渲染，雖然肉眼看不到它渲染的頁面，但是通過生成圖片就可以看到了，node-webshot使用的就是phantomjs的render介面來獲取網頁截圖的。

node-webshot生成谷歌首頁的示例代碼：

var webshot = require(‘webshot’); webshot(‘google.com’, ‘google.png’, function(err) { // screenshot now saved to google.png});phantomjs生成谷歌首頁的示例代碼： var page = require(‘webpage’).create();page.open(”, function() { page.render(‘github.png’); phantom.exit();});

那為什麼不直接使用phantomjs呢?一個字懶!

另外node-webshot還對文件讀寫進行了簡單的封裝，相信任何熟悉node.js的開發人員，都能很簡單的寫出這樣的介面，但是既然輪子好用就不要自己造了。

node-webshot流式調用的寫法：

var webshot = require(‘webshot’);var fs = require(‘fs’); var renderStream = webshot(‘google.com’);var file = fs.createWriteStream(‘google.png’, {encoding: ‘binary’}); renderStream.on(‘data’, function(data) { file.write(data.toString(‘binary’), ‘binary’);});

node-webshit還支持生成移動版的網頁截圖：

var webshot = require(‘webshot’); var options = { screenSize: { width: 320 , height: 480 }, shotSize: { width: 320 , height: ‘all’ }, userAgent: ‘Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us)’ + ‘ AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g’}; webshot(‘flickr.com’, ‘flickr.jpeg’, options, function(err) { // screenshot now saved to flickr.jpeg});

最後再把yargs和node-webshot進行集成，可惜這部分工作人家也幫我們做好了，直接安裝就行。

npm isntall -g webshot-cli

使用desktop-screenshot進行系統截圖

desktop-screenshot是一個跨平台的系統截圖項目，用法和node-webshot類似，只是少了一個url參數。var screenshot = require(‘desktop-screenshot’); screenshot(“screenshot.png”, function(error, complete) { if(error) console.log(“Screenshot failed”, error); else console.log(“Screenshot succeeded”);});

如何用 js 做網站截圖

有個庫 html2canvas.js，這個很多人用。

官網示例：

HTML

div id=”capture” style=”padding: 10px; background: #f5da55″

    h4 style=”color: #000; “Hello world!/h4/div

JavaScript

html2canvas(document.querySelector(“#capture”)).then(canvas = {

    document.body.appendChild(canvas)});