命令行批量截图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 替换
Feb 19 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
详解python 爬取12306验证码
2019/05/10 Python
python  logging日志打印过程解析
2019/10/22 Python
python如何写try语句
2020/07/14 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
运动会广播稿150字
2014/02/19 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
PHP判断是否是json字符串
2021/04/01 PHP