脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → node.js实现快速截图

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的Tcp封包和解包的理解

    基于Nodejs的Tcp封包和解包的理解

    这篇文章主要介绍了基于Nodejs的Tcp封包和解包的理解，详细的介绍了tcp的分包与拆包并实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • node.JS路径解析之PATH模块使用方法详解

    node.JS路径解析之PATH模块使用方法详解

    path模块包含一系列处理和转换文件路径的工具集，通过 require('path') 可用来访问这个模块。本文将详细介绍path模块
    2020-02-02
  • 前端面试之输入npm run后执行原理

    前端面试之输入npm run后执行原理

    这篇文章主要为大家介绍了前端面试之输入npm run后发生了什么及执行原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 修改NPM全局模式的默认安装路径的方法

    修改NPM全局模式的默认安装路径的方法

    这篇文章主要介绍了修改NPM全局模式的默认安装路径的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Node.js中的事件驱动编程详解

    Node.js中的事件驱动编程详解

    这篇文章主要介绍了Node.js中的事件驱动编程详解,本文主要讲解理论性知识,如什么是事件驱动编程、什么是闭包、闭包如何帮助异步编程等知识,需要的朋友可以参考下
    2014-08-08
  • 详解如何给Node.js版本降级

    详解如何给Node.js版本降级

    Node.js是一个基于chrome v8引擎的JavaScript运行时环境,用于构建快速、可扩展的网络应用程序,在某些情况下,降级Node.js版本可能额是必要的,本篇文章将向您介绍如今降级Node.js版本并提供相应的源代码示例,需要的朋友可以参考下
    2023-11-11
  • 三步教你完成切换nodejs版本

    三步教你完成切换nodejs版本

    nvm是一个node的版本管理工具,可以简单操作node版本的切换、安装、查看,下面这篇文章主要给大家介绍了关于如何通过三步完成切换nodejs版本的相关资料,需要的朋友可以参考下
    2023-01-01
  • 简单了解node npm cnpm的具体使用方法

    简单了解node npm cnpm的具体使用方法

    这篇文章主要介绍了简单了解node npm cnpm的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • 基于websocket实现简单聊天室对话

    基于websocket实现简单聊天室对话

    这篇文章主要为大家详细介绍了基于websocket实现简单聊天室对话，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • node.js请求HTTPS报错：UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法

    node.js请求HTTPS报错：UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法

    最近在工作中遇到一个问题，node.js请求HTTPS时报错：Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE\，通过查找网上的一些资料找到了解决方法，现在总结下分享给大家，有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12

最新评论