node.js实现快速截图

 更新时间:2016年08月27日 12:03:02   投稿:hebedich  
本文给大家汇总介绍了几种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自带的好用点。

图片优化

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

imagemin

svgo

svgo使用用来优化svg图片,svg将会代替icon font成为新的趋势,

相关文章

  • nodejs递归文件夹获取所有文件路径实例

    nodejs递归文件夹获取所有文件路径实例

    这篇文章主要为大家介绍了nodejs递归文件夹获取所有文件路径实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • express默认日志组件morgan的方法

    express默认日志组件morgan的方法

    morgan是express默认的日志中间件,这篇文章主要介绍了express默认日志组件morgan的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • nodejs和php实现图片访问实时处理

    nodejs和php实现图片访问实时处理

    这篇文章主要为大家详细介绍了nodejs和php分别实现图片访问实时处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 在Node.js中使用Express框架和Mongoose库实现视频评论功能

    在Node.js中使用Express框架和Mongoose库实现视频评论功能

    本文我们将详细介绍如何在Node.js应用中使用Express框架和Mongoose库来实现一个视频评论功能,这个功能允许用户对视频内容添加评论,并将评论数实时更新,以下是逐步的实现过程,包括代码示例和说明,需要的朋友可以参考下
    2024-04-04
  • node.js中的events.EventEmitter.listenerCount方法使用说明

    node.js中的events.EventEmitter.listenerCount方法使用说明

    这篇文章主要介绍了node.js中的events.EventEmitter.listenerCount方法使用说明,本文介绍了events.EventEmitter.listenerCount的方法说明、语法、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • 详解nodejs爬虫程序解决gbk等中文编码问题

    详解nodejs爬虫程序解决gbk等中文编码问题

    本篇文章主要介绍了nodejs爬虫程序解决gbk等中文编码问题,解决了网页的编码与nodejs默认编码不一致造成的乱码问题,有兴趣的可以了解一下
    2017-04-04
  • node crawler如何添加promise支持

    node crawler如何添加promise支持

    这篇文章主要介绍了node crawler如何添加promise支持,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 利用n工具轻松管理Node.js的版本

    利用n工具轻松管理Node.js的版本

    我们在测试写的Nodejs的程序在不同Nodejs版本下是否能正常运行,或是我们想要尝试下最新版 Nodejs 的新特性,但常用的代码需要旧版本的 Nodejs的时候就需要用 Node 版本管理工具,本文介绍的是利用n工具如何轻松管理Node.js的版本,需要的朋友可以参考下。
    2017-04-04
  • express + jwt + postMan验证实现持久化登录

    express + jwt + postMan验证实现持久化登录

    这篇文章主要介绍了express + jwt + postMan验证实现持久化登录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 详解npm与package.json之间的联系

    详解npm与package.json之间的联系

    这篇文章主要为大家介绍了npm与package.json之间的联系图文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07

最新评论