快捷導(dǎo)航

node.js實(shí)現(xiàn)快速截圖

更新時(shí)間：2016年08月27日 12:03:02 投稿：hebedich

本文給大家匯總介紹了幾種node.js實(shí)現(xiàn)快速截屏的方法，這里分享給大家，希望大家能夠喜歡。

寫文章的時(shí)候經(jīng)常需要插入圖片，插入現(xiàn)有的圖片很簡(jiǎn)單，有時(shí)候制作一些優(yōu)秀的網(wǎng)站列表的時(shí)候需要添加網(wǎng)頁(yè)截圖，這個(gè)過(guò)程非?？菰锓ξ?，可以考慮開(kāi)發(fā)一個(gè)命令行工具傳入一個(gè)url，然后生成頁(yè)面截圖。

使用node-webshot進(jìn)行網(wǎng)頁(yè)截圖

用到的npm模塊有yargs和node-webshot，關(guān)于yargs的文章參考這里從零開(kāi)始打造個(gè)人專屬命令行工具集——yargs完全指南。

node-webshot是調(diào)用phantomjs來(lái)生成網(wǎng)頁(yè)截圖的，phantomjs是非常有名的npm項(xiàng)目，相當(dāng)于一個(gè)腳本版的WebKit瀏覽器，通過(guò)phantomjs可以使用腳本和網(wǎng)頁(yè)進(jìn)行交互，所以phantomjs經(jīng)常用來(lái)進(jìn)行網(wǎng)頁(yè)自動(dòng)化測(cè)試。

phantomjs會(huì)和普通的瀏覽器一樣加載完整的網(wǎng)頁(yè)內(nèi)容，然后在內(nèi)存里面進(jìn)行渲染，雖然肉眼看不到它渲染的頁(yè)面，但是通過(guò)生成圖片就可以看到了，node-webshot使用的就是phantomjs的render接口來(lái)獲取網(wǎng)頁(yè)截圖的。

node-webshot生成谷歌首頁(yè)的示例代碼：

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

那為什么不直接使用phantomjs呢?一個(gè)字懶!

另外node-webshot還對(duì)文件讀寫進(jìn)行了簡(jiǎn)單的封裝，相信任何熟悉node.js的開(kāi)發(fā)人員，都能很簡(jiǎn)單的寫出這樣的接口，但是既然輪子好用就不要自己造了。

node-webshot流式調(diào)用的寫法：

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還支持生成移動(dòng)版的網(wǎng)頁(yè)截圖：

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進(jìn)行集成，可惜這部分工作人家也幫我們做好了，直接安裝就行。

npm isntall -g webshot-cli

使用desktop-screenshot進(jìn)行系統(tǒng)截圖

desktop-screenshot是一個(gè)跨平臺(tái)的系統(tǒng)截圖項(xiàng)目，用法和node-webshot類似，只是少了一個(gè)url參數(shù)。

var screenshot = require('desktop-screenshot'); 
 
screenshot("screenshot.png", function(error, complete) { 
  if(error) 
    console.log("Screenshot failed", error); 
  else 
    console.log("Screenshot succeeded"); 
});

這個(gè)是我的系統(tǒng)截圖