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成为新的趋势,

(0)

相关推荐

  • Node.js读写文件之批量替换图片的实现方法

    问题:文件夹A中有大量图片文件,需要用另外一个图片替换掉A中图片,但是命名保持不变. 手工的做法如下: 1)浏览器打开图片->2)另存为->3)目标文件夹->4)找到一个图片->5)替换->6)确定 然后,重复步骤2)和之后的步骤.不小心会漏掉或重复. 这么麻烦,使用node.js来处理改如何呢?代码如下: var fs=require('fs'), cp=require('child_process'); var url='Moriarty.jpg' var rs=fs.r

  • 解决node.js安装包失败的几种方法

    镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在): 1.通过config命令 npm config set registry https://registry.npm.taobao.org npm info underscore (如果上面配置正确这个命令会有字符串response) 2.命令行指定 npm --registry https://registry.npm.taobao.org info underscore 3.编辑 ~/.npmrc

  • 深入分析node.js的异步API和其局限性

    用异步API的原因 异步的概念之所以首先在Web2.0中火起来,是因为在浏览器中Javascript在单线程上执行,而且他还与UI渲染公用一个线程.这意味着Javascript在执行的时候UI渲染和响应是处于停滞状态的.为了用户体验更好而采取异步的方式(当然,这在所谓的单线程语言中)不阻塞主线程继续响应用户操作.这属于用户体验的范畴. 同样的,如果有其他语言经验的工程师当然也明白,CPU在线程间切换是需要消耗大量的时间的(主要为上下文之间的切换和缓存),所以提高效率也是使用异步API的理由. 当

  • Node.js配合node-http-proxy解决本地开发ajax跨域问题

    情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题.  用到的技术:

  • Node.js 日志处理模块log4js

    log4js 是 Node.js 日志处理中的数一数二的模块.比起 console 或者 TJ 的 debug 有其优势,尤其针对投入生产的 Node.js 项目来说下面这些是不可少的: 日志分级 日志分类 日志落盘 本文将会给你一个 log4js 的全面介绍,让你可以在项目中驾轻就熟的使用 log4js,开发调试容易,线上更好地监控或排查问题. 牛刀小试 下面这三行代码为你展示了 log4js 最简单的用法: // file: simplest.js var log4js = require(

  • 在Docker快速部署Node.js应用的详细步骤

    一.前言 可能还有一些同学不了解docker这个项目,docker是由go语言编写的,一个快速部署的轻量级虚拟技术项目,他允许开发人员将自己的程序和运行环境一起打包,制作成一个docker的image(镜像),这样部署到服务器上,也只需要下载这个image就可以将程序跑起来,免去每次都安装各种依赖和环境的麻烦,还能够做到应用程序之间的隔离 二.实现准备 我会先创建一个简单的Node.js web app,来构建一个镜像.然后基于这个Image运行一个container.从而实现快速部署. 由于网

  • 分析Node.js connect ECONNREFUSED错误

    最近在准备Angularjs +node.js demo的时候在我的mac开发中 遇见此错误,如下: events.js:71 throw arguments[1]; // Unhandled 'error' event ^ Error: connect ECONNREFUSED at errnoException (net.js:770:11) at Object.afterConnect [as oncomplete] (net.js:761:19) 最后在stackoverflow找到解决

  • 教你如何在Node.js中使用jQuery

    想要在NodeJs中使用jQuery? 首先,我们得安装jquery, npm install jquery .安装后的版本是 3.1.0 接着,第一感觉我们会使用 var $ = require('jquery') . 将以下代码保存为app.js var $ = require('jquery') $("body").append("<div>TEST</div>"); console.log($("body").ht

  • Node.js实现兼容IE789的文件上传进度条

    Nodejs对文件上传的处理 在Express4里req.files已经是undefined了:现在用的最多的可能就是formidable了,你知道了它有个progress事件,于是心中大喜,低版本IE的进度条有戏了:OK,试一下: form .on('error',function(err){ console.log(err); }) .on('aborted',function(){ console.log('aborted'); }) .on('progress',function(byt

  • Node.js connect ECONNREFUSED错误解决办法

    最近在准备Angularjs +node.js demo的时候在我的mac开发中 遇见此错误,如下: events.js:71 throw arguments[1]; // Unhandled 'error' event ^ Error: connect ECONNREFUSED at errnoException (net.js:770:11) at Object.afterConnect [as oncomplete] (net.js:761:19) 最后在stackoverflow找到解决

  • node.js express安装及示例网站搭建方法(分享)

    1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g express npm install -g express-generator 2.创建一个示例工程 windows cmd依次输入如下命令: cd C:\Program Files\nodejs\node_global express -e microblog //即ejs,-j(即jade) cd microblog npm i

随机推荐