【引自ideras.me的博客】寫文章的時候經(jīng)常需要插入圖片，插入現(xiàn)有的圖片很簡單，有時候制作一些優(yōu)秀的網(wǎng)站列表的時候需要添加網(wǎng)頁截圖， 這個過程非常枯燥乏味，可以考慮開發(fā)一個命令行工具傳入一個url，然后生成頁面截圖。

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為慈溪等服務建站，慈溪等地企業(yè)，進行企業(yè)商務咨詢服務。為慈溪企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

使用node-webshot進行網(wǎng)頁截圖

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

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

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

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的開發(fā)人員，都能很簡單的寫出這樣的接口，但是既然輪子好用就不要自己造了。

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

 
 

  
  
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進行系統(tǒng)截圖

desktop-screenshot是一個跨平臺的系統(tǒng)截圖項目，用法和node-webshot類似，只是少了一個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"); 
  
  
}); 
 
 

 

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

問題是我用調(diào)用命令行的時候這個窗口也會出現(xiàn)在截圖上面，而且沒有太好的辦法來去除這個窗口，系統(tǒng)截圖還是使用windows自帶的好用點。

圖片優(yōu)化

***介紹兩個圖片優(yōu)化的工具

• imagemin
• svgo

svgo使用用來優(yōu)化svg圖片，svg將會代替icon font成為新的趨勢，詳情閱讀github的從icon font切換到svg的文章 Delivering Octicons with SVG，不服來辯。

網(wǎng)站欄目：怎么使用node.js進行快速截圖？
文章位置：http://uogjgqi.cn/article/ccecpdd.html