怎么使用node.js进行快速截图?-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

怎么使用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生成谷歌首页的示例代码:


  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. }); 

这个是我的系统截图

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

图片优化

最后介绍两个图片优化的工具

svgo使用用来优化svg图片,svg将会代替icon font成为新的趋势,详情阅读github的从icon font切换到svg的文章 Delivering Octicons with SVG,不服来辩。


作者:ideras.me

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: