Nodejs 截图组件&npm包

约定不等于承诺〃 2021-06-11 15:11 697阅读 0赞

下面都是转的，自己试了一下可以保存图片  
npm install webshot  
var webshot = require('webshot');   
   
webshot('baidu.com', 'google.png', function(err) \{   
  // screenshot now saved to google.png   
\});

![70][]

写文章的时候经常需要插入图片，插入现有的图片很简单，有时候制作一些优秀的网站列表的时候需要添加网页截图， 这个过程非常枯燥乏味，可以考虑开发一个命令行工具传入一个url，然后生成页面截图。

**使用node-webshot进行网页截图**

用到的npm模块有yargs和node-webshot，关于yargs的文章参考这里[从零开始打造个人专属命令行工具集——yargs完全指南][yargs]。

node-webshot是调用phantomjs来生成网页截图的，phantomjs是非常有名的npm项目，相当于一个脚本版的WebKit浏览器 ，通过phantomjs可以使用脚本 和网页进行交互，所以phantomjs经常用来进行网页自动化测试。

phantomjs会和普通的浏览器一样加载完整的网页内容，然后在内存里面进行渲染，虽然肉眼看不到它渲染的页面，但是通过生成图片就可以看到了，node-webshot使用的就是phantomjs的render接口来获取网页截图的。

node-webshot生成谷歌首页的示例代码：

1.  var webshot = require('webshot'); 
2.   
3.  webshot('google.com', 'google.png', **function**(err) \{ 
4.    // screenshot now saved **to** google.png 
5.  \}); 
6.  //phantomjs生成谷歌首页的示例代码： 
7.   
8.  var page = require('webpage').**create**(); 
9.  page.**open**('http://github.com/', **function**() \{ 
10.   page.render('github.png'); 
11.   phantom.exit(); 
12. \});

那为什么不直接使用phantomjs呢?一个字懒!

另外node-webshot还对文件读写进行了简单的封装，相信任何熟悉node.js的开发人员，都能很简单的写出这样的接口，但是既然轮子好用就不要自己造了。

node-webshot流式调用的写法：

1.  var webshot = require('webshot'); 
2.  var fs      = require('fs'); 
3.   
4.  var renderStream = webshot('google.com'); 
5.  var file = fs.createWriteStream('google.png', \{encoding: 'binary'\}); 
6.   
7.  renderStream.**on**('data', **function**(data) \{ 
8.    file.write(data.toString('binary'), 'binary'); 
9.  \});

node-webshit还支持生成移动版的网页截图：

1.  var webshot = require('webshot'); 
2.   
3.  var options = \{ 
4.    screenSize: \{ 
5.      width: 320 
6.    , height: 480 
7.    \} 
8.  , shotSize: \{ 
9.      width: 320 
10.   , height: 'all' 
11.   \} 
12. , userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3\_2 like Mac OS X; en-us)' 
13.     + ' AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g' 
14. \}; 
15.  
16. webshot('flickr.com', 'flickr.jpeg', options, **function**(err) \{ 
17.   // screenshot now saved **to** flickr.jpeg 
18. \});

最后再把yargs和node-webshot进行集成，可惜这部分工作人家也帮我们做好了，直接安装就行。

1.  npm isntall -g webshot-cli

**使用desktop-screenshot进行系统截图**

desktop-screenshot是一个跨平台的系统截图项目，用法和node-webshot类似，只是少了一个url参数。

1.  var screenshot = require('desktop-screenshot'); 
2.   
3.  screenshot("screenshot.png", **function**(error, complete) \{ 
4.      if(error) 
5.          console.log("Screenshot failed", error); 
6.      **else** 
7.          console.log("Screenshot succeeded"); 
8.  \});

这个是我的系统截图

[![wKioL1e-86yw5sVsAAGHAu0k9Qc464.png][]][wKioL1e-86yw5sVsAAGHAu0k9Qc464.png]

问题是我用调用命令行的时候这个窗口也会出现在截图上面，而且没有太好的办法来去除这个窗口，系统截图还是使用windows自带的好用点。

[70]: /images/20210527/a93f7d1084654b7388e207ddc4ad012b.png
[yargs]: http://developer.51cto.com/art/201608/515865.htm
[wKioL1e-86yw5sVsAAGHAu0k9Qc464.png]: http://s1.51cto.com/wyfs02/M02/86/73/wKioL1e-86yw5sVsAAGHAu0k9Qc464.png