溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
批量截圖任務
作為一個軟件工程師，不只是做好自己的本職工作（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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
