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

sh_zheng 8年前發布 | 41K 次閱讀 Node.js PhantomJS Node.js擴展

寫文章的時候經常需要插入圖片,插入現有的圖片很簡單,有時候制作一些優秀的網站列表的時候需要添加網頁截圖, 這個過程非常枯燥乏味,可以考慮開發一個命令行工具傳入一個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"); 
}); 

這個是我的系統截圖

問題是我用調用命令行的時候這個窗口也會出現在截圖上面,而且沒有太好的辦法來去除這個窗口,系統截圖還是使用windows自帶的好用點。

圖片優化

最后介紹兩個圖片優化的工具

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

 

來自:http://developer.51cto.com/art/201608/516453.htm

 

 本文由用戶 sh_zheng 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!