puppeteer截圖

puppeteer是谷歌官方出品的一個經過 DevTools 協議控制 headless Chrome 的Node庫。能夠經過Puppeteer的提供的api直接控制Chrome模擬大部分用戶操做來進行UI Test或者做爲爬蟲訪問頁面來收集數據。

安裝

直接運行安裝命令：

npm install puppeteer

若是出現沒法安裝的問題，能夠使用淘寶鏡像。

puppeteer實現滑動截圖

在我 puppeteer 使用截全屏的過程當中發現有些圖片沒法截取到，而其實是由於有些圖片是懶加載的，若是你沒有滑動到圖片的位置，那麼這個圖片是不會加載。

如今個人方式是採用模擬瀏覽器滾動條滑動的方式滑動底部來使圖片加載出來。

代碼以下：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
    await page.setViewport({
        width: 1200,
        height: 800
    });

    await autoScroll(page);

    await page.screenshot({
        path: '1.png',
        fullPage: true
    });

    await browser.close();
})();


function autoScroll(page) {
    return page.evaluate(() => {
        return new Promise((resolve, reject) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;
                if (totalHeight >= scrollHeight) {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        })
    });
}

動圖以下：

puppeteer 實現 html element 截圖

在某些狀況下咱們只想要針對html的某個位置進行截圖而不是針對頁面截全屏。

puppeteer提供了ElementHandle.screenshot 方法，該方法參數和page.screenshot 同樣。而ElementHandle 對象是頁面內的Dom對象。能夠幫助我對 html element進行截圖。這樣的話你想截取頁面的哪部分就截取頁面的哪部分。

代碼以下：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://www.cnblogs.com/morethink/p/6525216.html');
    await page.setViewport({
        width: 1200,
        height: 800
    });
    //獲取頁面Dom對象
    let body = await page.$('#cnblogs_post_body');
    //調用頁面內Dom對象的 screenshot 方法進行截圖
    await body.screenshot({
        path: '2.png'
    });
    await browser.close();
})();

參考文檔：

1. https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#elementhandlescreenshotoptions