iOS独立开发者让前端飞有些文章不一定是为了上首页投稿

命令行批量截图Node脚本

2019-01-25  本文已影响4人  杭城小刘

批量截图任务

作为一个软件工程师,不只是做好自己的本职工作(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

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 操作系统)

流程说明

  1. while 循环去调用接口去获取当前的截图任务
    • 在有截图任务情况下继续截图
    • 没有截任务的情况下,为了避免浪费资源,程序休眠10分钟后继续下一次的获取截图任务
    • 如果遇到调用截图任务接口500错误,则强制停止截图任务,相应的服务端工程师去查询失败原因
  2. 如果有截图任务那么就去截图
  1. 截图成功不管失败还是成功都去通知服务端。如果失败将当前任务告诉服务端,如果成功将当前任务信息和截图成功的绝对路径告诉服务端

一些说明

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

todoList

代码地址

上一篇下一篇

猜你喜欢

热点阅读