node.js实现快速截图


Posted in Javascript onAugust 27, 2016

写文章的时候经常需要插入图片,插入现有的图片很简单,有时候制作一些优秀的网站列表的时候需要添加网页截图, 这个过程非常枯燥乏味,可以考虑开发一个命令行工具传入一个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"); 
});

这个是我的系统截图

node.js实现快速截图

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

图片优化

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

imagemin

svgo

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

Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 #Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 #Javascript
轻松掌握JavaScript享元模式
Aug 27 #Javascript
JavaScript编码风格指南(中文版)
Aug 26 #Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 #Javascript
ES6中的数组扩展方法
Aug 26 #Javascript
jQuery实现微信长按识别二维码功能
Aug 26 #Javascript
You might like
PHP截取中文字符串的问题
2006/07/12 PHP
PHP个人网站架设连环讲(二)
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php注册登录系统简化版
2020/12/28 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Tensorflow 实现释放内存
2020/02/03 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
《伯牙绝弦》教学反思
2014/03/02 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书