命令行批量截图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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
Promise扫盲贴
Jun 24 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
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之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python----数据预处理代码实例
2019/03/20 Python
Python猴子补丁知识点总结
2020/01/05 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
如何理解Python中包的引入
2020/05/29 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
荷叶母亲教学反思
2014/04/30 职场文书
交通安全横幅标语
2014/10/07 职场文书
抗洪救灾标语
2014/10/08 职场文书
世界环境日活动总结
2015/02/11 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
周一给客户的问候语
2015/11/10 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技