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

上一篇: 在worker中使用canvas

下一篇: 值得一看的文章

https://github.com/puppeteer/puppeteer

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

對(duì)于截圖時(shí)機(jī)的把控, 我們可以在window上掛一個(gè)屬性, 或者promise, 只有該屬性為真或者promise完成后才開(kāi)始截圖, 這樣就能在頁(yè)面內(nèi)把控時(shí)機(jī)了

單個(gè)元素截圖

先查詢(xún)出來(lái)元素, 然后調(diào)用, 感覺(jué)是不是比html2canvas要好一點(diǎn)? 雖然速度上可能慢, 但兼容性應(yīng)該好點(diǎn)

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();

全屏截圖

直接使用是不行的, 只有前面是加載出來(lái)的, 后面圖片完全沒(méi)有加載成功

使用類(lèi)似的想法, 先滾動(dòng)到最后, 然后再?gòu)念^截圖

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

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);}// 如果返回的是一個(gè)promise, 那么久等待這個(gè)promise結(jié)束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();

總結(jié)

以上是生活随笔為你收集整理的Puppeteer B站全屏截图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。