原文鏈接: Puppeteer B站全屏截圖

上一篇: 在worker中使用canvas

下一篇: 值得一看的文章

https://github.com/puppeteer/puppeteer

https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

對于截圖時機的把控, 我們可以在window上掛一個屬性, 或者promise, 只有該屬性為真或者promise完成后才開始截圖, 這樣就能在頁面內把控時機了

單個元素截圖

先查詢出來元素, 然后調用, 感覺是不是比html2canvas要好一點? 雖然速度上可能慢, 但兼容性應該好點

const puppeteer = require("puppeteer"); const waitTime = (n) => new Promise((r) => setTimeout(r, n));const main = async () => {const browser = await puppeteer.launch();const page = await browser.newPage();const className = ".bili-banner";await page.goto("https://www.bilibili.com/");await page.setViewport({width: 1920,height: 1080,});await waitTime(2000);const item = await page.$(className);// 不加path 返回bufferawait item.screenshot({ path: "item.png" });await browser.close(); }; main();

全屏截圖

直接使用是不行的, 只有前面是加載出來的, 后面圖片完全沒有加載成功

使用類似的想法, 先滾動到最后, 然后再從頭截圖

B站圖片很多, 所以等待時間可以長一點, 最好是直接等待所有圖片加載完畢, 這一次就直接全部圖片都能看到了

const puppeteer = require("puppeteer"); const waitTime = (n) => new Promise((r) => setTimeout(r, n));const main = async () => {const browser = await puppeteer.launch();const page = await browser.newPage();await page.goto("https://www.bilibili.com/");await page.setViewport({width: 1920,height: 1080,});let step = 400;for (let i = 0; i < 50; i++) {await page.evaluate((distance) => {window.scrollBy(0, distance);}, step);await waitTime(100);}// 如果返回的是一個promise, 那么久等待這個promise結束const pageRendered = page.evaluate(() => {const imageList = Array.from(document.getElementsByTagName("img"));const promiseList = imageList.map((item) =>item.complete ? Promise.resolve() : new Promise((r) => (item.onload = r)));return Promise.all(promiseList);});const timePromise = waitTime(10000);// 等待十秒, 或者所有圖片加載完畢await Promise.race([pageRendered, timePromise]);await page.screenshot({ path: "example-full2.png", fullPage: true });await browser.close(); }; main();

總結

以上是生活随笔為你收集整理的Puppeteer B站全屏截图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。