您好,登录后才能下订单哦!
批量截图任务
作为一个软件工程师,不只是做好自己的本职工作(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
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i --save puppeteer
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 操作系统)
如果你有翻墙环境
如果你没有翻墙环境
流程说明
while 循环去调用接口去获取当前的截图任务
如果有截图任务那么就去截图
截图成功不管失败还是成功都去通知服务端。如果失败将当前任务告诉服务端,如果成功将当前任务信息和截图成功的绝对路径告诉服务端
一些说明
Demo 中执行 npm start 真正执行的是 quickStart.js 中的代码。完整的“获取截图任务、截图、截图上传到OSS、失败则将失败任务上传到服务”逻辑在 index.js 文件中
todoList
代码地址 (本地下载)
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。