node.js實現快速截圖

2019-11-20 09:08:31

字體：大中小

來源：轉載

供稿：網友

寫文章的時候經常需要插入圖片，插入現有的圖片很簡單，有時候制作一些優秀的網站列表的時候需要添加網頁截圖，這個過程非常枯燥乏味，可以考慮開發一個命令行工具傳入一個url，然后生成頁面截圖。

使用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('http://github.com/', 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"); });

這個是我的系統截圖