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 相关文章推荐
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python批量赋值操作实例
2018/10/22 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
keras.layer.input()用法说明
2020/06/16 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
基于python实现坦克大战游戏
2020/10/27 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
校园招聘策划书
2014/01/09 职场文书
工作会议方案
2014/05/21 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书