寫文章的時候經常需要插入圖檔，插入現有的圖檔很簡單，有時候制作一些優秀的網站清單的時候需要添加網頁截圖， 這個過程非常枯燥乏味，可以考慮開發一個指令行工具傳入一個url，然後生成頁面截圖。
使用node-webshot進行網頁截圖
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 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 options = {
screensize: {
width: 320
, height: 480
}
, shotsize: {
, 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");
這個是我的系統截圖
問題是我用調用指令行的時候這個視窗也會出現在截圖上面，而且沒有太好的辦法來去除這個視窗，系統截圖還是使用windows自帶的好用點。
圖檔優化
最後介紹兩個圖檔優化的工具
<a href="https://www.npmjs.com/package/imagemin">imagemin</a>
<a href="https://github.com/ajstarks/svgo">svgo</a>
作者：ideras.me
來源：51cto