命令行批量截圖Node腳本示例代碼
批量截圖任務(wù)
作為一個(gè)軟件工程師,不只是做好自己的本職工作(iOS),而是需要解決項(xiàng)目中的技術(shù)問題。這次就是解決自動(dòng)截圖的問題
早期公司的數(shù)據(jù)工程師利用 phantomjs 來截圖,后期不斷發(fā)現(xiàn)截圖效率低,加之開發(fā)者團(tuán)隊(duì)不再維護(hù),因此決定將截圖這部分跟你剝離開來,以后方便開發(fā)維護(hù)。我就承擔(dān)了這個(gè)工作
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
) 好幾次都卡住了,后期查找資料發(fā)現(xiàn)切換到國(guó)內(nèi)的鏡像就可以順利下載
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(){ // 啟動(dòng)Chromium const browser = await puppeteer.launch({ignoreHTTPSErrors: true, headless:true, args: ['--no-sandbox']}) // 打開新頁(yè)面 const page = await browser.newPage() // 設(shè)置頁(yè)面分辨率 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 操作系統(tǒng))
如果你有翻墻環(huán)境
- 執(zhí)行 npm install
- 執(zhí)行 npm start
如果你沒有翻墻環(huán)境
- 打開 package.json 文件,檢查 dependencies 項(xiàng)目,如果 key 為 puppeteer 的條目,先刪除該條目。
- 進(jìn)入工程命令行,輸入 PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.co... npm i --save puppeteer
- 執(zhí)行 npm install 命令
- 執(zhí)行 npm start
流程說明
while 循環(huán)去調(diào)用接口去獲取當(dāng)前的截圖任務(wù)
- 在有截圖任務(wù)情況下繼續(xù)截圖
- 沒有截任務(wù)的情況下,為了避免浪費(fèi)資源,程序休眠10分鐘后繼續(xù)下一次的獲取截圖任務(wù)
- 如果遇到調(diào)用截圖任務(wù)接口500錯(cuò)誤,則強(qiáng)制停止截圖任務(wù),相應(yīng)的服務(wù)端工程師去查詢失敗原因
如果有截圖任務(wù)那么就去截圖
- 截圖后將截圖圖片保存到文件夾,命令為當(dāng)前日期 yyyy-MM-dd-hh-mm-ss-S 格式。然后將結(jié)果上傳到服務(wù)端
- 截圖失敗將當(dāng)前任務(wù)結(jié)果保存到本地 failedTasks.json 文件夾一份,然后上傳到服務(wù)端
截圖成功不管失敗還是成功都去通知服務(wù)端。如果失敗將當(dāng)前任務(wù)告訴服務(wù)端,如果成功將當(dāng)前任務(wù)信息和截圖成功的絕對(duì)路徑告訴服務(wù)端
一些說明
Demo 中執(zhí)行 npm start 真正執(zhí)行的是 quickStart.js 中的代碼。完整的“獲取截圖任務(wù)、截圖、截圖上傳到OSS、失敗則將失敗任務(wù)上傳到服務(wù)”邏輯在 index.js 文件中
- 工程是在沒有提供真正的接口獲取任務(wù),而是采用隨機(jī)數(shù)獲取截圖任務(wù)
- 截圖成功后將結(jié)果上傳到OSS這一個(gè)步驟是沒有的,采用 log 出來
- 失敗的上傳也是不存在的,log 打印而已
todoList
- 多線程高效率的去截圖
- 一些寫法暫時(shí)比較粗糙,不優(yōu)雅,待改進(jìn)
- puppeteer 很強(qiáng)大,大家可以去研究下
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- nodejs命令行參數(shù)處理模塊commander使用實(shí)例
- 淺談node.js 命令行工具(cli)
- Node.js 使用命令行工具檢查更新
- node通過npm寫一個(gè)cli命令行工具
- Node.js利用Net模塊實(shí)現(xiàn)多人命令行聊天室的方法
- 詳解用Node.js寫一個(gè)簡(jiǎn)單的命令行工具
- node命令行工具之實(shí)現(xiàn)項(xiàng)目工程自動(dòng)初始化的標(biāo)準(zhǔn)流程
- node.js中路由,中間件,get請(qǐng)求和post請(qǐng)求的參數(shù)詳解
- node.js獲取參數(shù)的常用方法(總結(jié))
- nodejs實(shí)現(xiàn)獲取當(dāng)前url地址及url各種參數(shù)值
- node.js使用yargs處理命令行參數(shù)操作示例
相關(guān)文章
Node.js中的async?和?await?關(guān)鍵字微任務(wù)和宏任務(wù)
這篇文章主要介紹了Node.js中的async和await關(guān)鍵字微任務(wù)和宏任務(wù),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07node.js文件系統(tǒng)之文件寫入實(shí)例詳解
Node.js和其他語(yǔ)言一樣,也有文件操作,下面這篇文章主要給大家介紹了關(guān)于node.js文件系統(tǒng)之文件寫入的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03淺析node中間件及實(shí)現(xiàn)一個(gè)簡(jiǎn)單的node中間件
這篇文章主要介紹了淺析node中間件及實(shí)現(xiàn)一個(gè)簡(jiǎn)單的node中間件,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09簡(jiǎn)單談?wù)刵ode.js 版本控制 nvm和 n
大量開發(fā)者的貢獻(xiàn)使Node版本的迭代速度很快,版本很多(橫跨0.6到0.11),所以升級(jí)Node版本就成為了一個(gè)問題。目前有n和nvm這兩個(gè)工具可以對(duì)Node進(jìn)行無(wú)痛升級(jí),本文簡(jiǎn)單介紹一下二者的使用。2015-10-10node+koa實(shí)現(xiàn)數(shù)據(jù)mock接口的方法
本篇文章主要介紹了node+koa實(shí)現(xiàn)數(shù)據(jù)mock接口的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09Nodejs + sequelize 實(shí)現(xiàn)增刪改查操作
這篇文章主要介紹了Nodejs + sequelize 實(shí)現(xiàn)增刪改查操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11