命令行批量截图Node脚本示例代码


Posted in Javascript onJanuary 25, 2019

批量截图任务

作为一个软件工程师,不只是做好自己的本职工作(iOS),而是需要解决项目中的技术问题。这次就是解决自动截图的问题

早期公司的数据工程师利用 phantomjs 来截图,后期不断发现截图效率低,加之开发者团队不再维护,因此决定将截图这部分跟你剥离开来,以后方便开发维护。我就承担了这个工作

puppeteer

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

安装问题

一开始按照往常的套路(npm install --save puppeteer) 好几次都卡住了,后期查找资料发现切换到国内的镜像就可以顺利下载

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i --save puppeteer
  • To use Puppeteer in your project, run:
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i --save puppeteer
  • Install some basic packages
npm install

Usage

const puppeteer = require('puppeteer'),
  fs = require('fs'),
  path = require('path'),
  request = require('request')

function mkdirsSync(dirname) {
 if (fs.existsSync(dirname)) {
 return true
 } else {
 if (mkdirsSync(path.dirname(dirname))) {
  fs.mkdirSync(dirname)
  return true
 }
 }
}

var snapShotFolerPath = path.join(__dirname, '../snspshot/')
mkdirsSync(snapShotFolerPath)

 function snapShot (taskInfo) {
 return new Promise(function (resolve, reject) {

 (async function(){
  // 启动Chromium
  const browser = await puppeteer.launch({ignoreHTTPSErrors: true, headless:true, args: ['--no-sandbox']})
  // 打开新页面
  const page = await browser.newPage()
  // 设置页面分辨率
  await page.setViewport({width: 1920, height: 1080})

  // 访问
  await page.goto(taskInfo.websiteUrl, {waitUntil: 'domcontentloaded'}).catch(err => console.log(err))
  await page.waitFor(1000)

  try {
  // 截图
  await page.screenshot({path: snapShotFolerPath + taskInfo.imageName, fullPage:true}).catch(err => {
   console.log('截图失败: ' + err)
  });
  await page.waitFor(6000)
  } catch (e) {
  console.log('failed ' + e)
  } finally {
  await browser.close()

  fs.stat(snapShotFolerPath + taskInfo.imageName, function(err,stats){
   if (err) {
   reject('fail')
   } else {                         
   if (stats.isFile()) {
    resolve('success')
   }
   }
  })
  }

 })()
 })
}

module.exports = snapShot

如何安装 (Linux 、Unix 操作系统)

如果你有翻墙环境

  • 执行 npm install
  • 执行 npm start

如果你没有翻墙环境

  • 打开 package.json 文件,检查 dependencies 项目,如果 key 为 puppeteer 的条目,先删除该条目。
  • 进入工程命令行,输入 PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.co... npm i --save puppeteer
  • 执行 npm install 命令
  • 执行 npm start

流程说明

while 循环去调用接口去获取当前的截图任务

  • 在有截图任务情况下继续截图
  • 没有截任务的情况下,为了避免浪费资源,程序休眠10分钟后继续下一次的获取截图任务
  • 如果遇到调用截图任务接口500错误,则强制停止截图任务,相应的服务端工程师去查询失败原因

如果有截图任务那么就去截图

  • 截图后将截图图片保存到文件夹,命令为当前日期 yyyy-MM-dd-hh-mm-ss-S 格式。然后将结果上传到服务端
  • 截图失败将当前任务结果保存到本地 failedTasks.json 文件夹一份,然后上传到服务端

截图成功不管失败还是成功都去通知服务端。如果失败将当前任务告诉服务端,如果成功将当前任务信息和截图成功的绝对路径告诉服务端

一些说明

Demo 中执行 npm start 真正执行的是 quickStart.js 中的代码。完整的“获取截图任务、截图、截图上传到OSS、失败则将失败任务上传到服务”逻辑在 index.js 文件中

  • 工程是在没有提供真正的接口获取任务,而是采用随机数获取截图任务
  • 截图成功后将结果上传到OSS这一个步骤是没有的,采用 log 出来
  • 失败的上传也是不存在的,log 打印而已

todoList

  • 多线程高效率的去截图
  • 一些写法暂时比较粗糙,不优雅,待改进
  • puppeteer 很强大,大家可以去研究下

代码地址 (本地下载)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
Node.js 进程平滑离场剖析小结
Jan 24 #Javascript
Vue.js样式动态绑定实现小结
Jan 24 #Javascript
实例讲解JavaScript预编译流程
Jan 24 #Javascript
实例讲解vue源码架构
Jan 24 #Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 #Javascript
JavaScript私有变量实例详解
Jan 24 #Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 #Javascript
You might like
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
js实现表格字段排序
2014/02/19 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python如何判断数独是否合法
2016/09/08 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
django 模型中的计算字段实例
2020/05/19 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
大四学年自我鉴定
2013/11/13 职场文书
半年思想汇报
2013/12/30 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书