快捷導(dǎo)航

命令行批量截圖Node腳本示例代碼

更新時(shí)間：2026年02月07日 15:17:00 作者：fantasticbaby

這篇文章主要給大家介紹了關(guān)于命令行批量截圖Node腳本的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

批量截圖任務(wù)

作為一個(gè)軟件工程師，不只是做好自己的本職工作（iOS），而是需要解決項(xiàng)目中的技術(shù)問(wèn)題。這次就是解決自動(dòng)截圖的問(wèn)題

早期公司的數(shù)據(jù)工程師利用 phantomjs 來(lái)截圖，后期不斷發(fā)現(xiàn)截圖效率低，加之開(kāi)發(fā)者團(tuán)隊(duì)不再維護(hù)，因此決定將截圖這部分跟你剝離開(kāi)來(lái)，以后方便開(kāi)發(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.

安裝問(wèn)題

一開(kāi)始按照往常的套路（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']})
  // 打開(kāi)新頁(yè)面
  const page = await browser.newPage()
  // 設(shè)置頁(yè)面分辨率
  await page.setViewport({width: 1920, height: 1080})

  // 訪問(wèn)
  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))

執(zhí)行 npm install
執(zhí)行 npm start

如果你沒(méi)有翻環(huán)境

打開(kāi) 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

流程說(shuō)明

while 循環(huán)去調(diào)用接口去獲取當(dāng)前的截圖任務(wù)

在有截圖任務(wù)情況下繼續(xù)截圖
沒(méi)有截任務(wù)的情況下，為了避免浪費(fèi)資源，程序休眠10分鐘后繼續(xù)下一次的獲取截圖任務(wù)
如果遇到調(diào)用截圖任務(wù)接口500錯(cuò)誤，則強(qiáng)制停止截圖任務(wù)，相應(yīng)的服務(wù)端工程師去查詢失敗原因

如果有截圖任務(wù)那么就去截圖