кукольный или серый скриншот - PullRequest
Новая
       63

кукольный или серый скриншот

0 голосов
/ 06 апреля 2020

Я пытаюсь сделать скриншоты всех элементов таблицы на веб-странице. Сейчас на некоторых страницах все работает отлично, я могу делать фотографии. Но некоторые сайты не работают. Я могу делать скриншоты, но они в основном белые или серые, вот код, который я использую. 

```const puppeteer = require('puppeteer');
const jsonfile = require('jsonfile');

const getWebImages = async(pageToGo, link) => {
    puppeteer.launch({
        args: ['--start-maximized'],
        headless: false,
        defaultViewport: null
    }).then(async (browser) => {
        const page = await browser.newPage();
        await page.goto(pageToGo, {waitUntil: 'networkidle2', timeout: 60000});
        const VIEWPORT = {width: 1366, height: 768 }; // Your default values
        boxes2 = [];

        const getData = async (link) => {
            return page.evaluate(async (link) => {
                return await new Promise(resolve => {
                    var rects = [];
                    const element = document.querySelectorAll('table');
                    element.forEach(function (item, index) {
                        var box = item.getBoundingClientRect();
                        rects.push({
                            x: box.left,
                            y: box.left,
                            width: box.width,
                            height: box.height,
                            id: index
                        })
                    })
                    return resolve(rects);
                })
            }, link);
        }

        const getImages = async (rect) => {
            for (const item of rect) {
                try {
                    await page.screenshot({
                        path: 'data\\_table_' + item.id + '.png',
                        clip: {
                            x: item.x,
                            y: item.y,
                            width: item.width,
                            height: item.height
                        }
                    });
                } catch (e) {
                    console.log(e)
                }
            }
        }
        boxes2 = await getData(link);
        images = await getImages(boxes2);
        console.log(boxes2)
        await browser.close();
    });
}

getWebImages("https://www.csb.gc.ca/rates/", 11);

Я пробовал экран другого размера и другие вещи, такие как ожидание загрузки всего. Когда я вижу в браузере, я могу четко видеть загрузку страницы и после ее загрузки снимки экрана сделаны, но изображения либо просто белые экраны того же размера, что и область табуляции.

ПРИМЕЧАНИЕ. Просто обратите внимание, что я также загрузил некоторые страницы в автономном режиме, и даже это не работает.

1 Ответ

0 голосов
/ 07 апреля 2020

Моя проблема заключалась в том, что я устанавливал viewport после goto(), я изменил код на этот; 

`const puppeteer = require('puppeteer');

async function run(url) {
    let browser = await puppeteer.launch({ headless: true });
    let page = await browser.newPage();
    const VIEWPORT = { width: 1360, height: 780}
    boxes2 = [];
    await page.setViewport(VIEWPORT);
    await page.goto(url, { waitUntil: 'domcontentloaded'});
    await page.waitFor('table');
    await page.waitForSelector('table');
    const el = await page.$$('table');
    for(let i = 0; i < el.length; i++){
        // await console.log(el[i].getBoundingClientRect());
        await el[i].screenshot({
            path: 'link_' +i+ '.png',
        })
    }
    // await processScreens(el, page);
    await page.close();
    await browser.close();
}
...