导航页面直到呈现最后一帧而不是 networkidel

Question

我正在截取大 html 的屏幕截图，但每次我尝试截取图像时，输出图像中都会出现大的白色 space。

我做了很多测试，发现在 load 事件之后有帧渲染，所以我没有在捕获的图像中得到它。

这是显示性能的图片显示 load 事件的红线以及该线之后的帧。

我试图阅读该软件包的所有文档，但我是一名土木工程师，对编程知之甚少，我尽了最大努力但找不到解决方案。

page.goto 中有 4 个选项，它们都没有解决问题，这里是文档的 url。 https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options

这是我的代码

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('D:\Image_2.HTML', {waitUntil: 'load'});
  function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
console.log(page.frames())
  await page.screenshot({path: 'example.png',fullPage : true});

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

Answer 1

您发布的脚本定义了 sleep 函数，但没有调用它。如果您等待足够长的时间，您就会使页面达到所需的状态。

NOTE: you can "sleep" with await page.waitFor() method.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('D:\Image_2.HTML', {waitUntil: 'load'});
  // wait for 2 seconds
  await page.waitFor(2000); 
  await page.screenshot({path: 'example.png',fullPage : true});
  await browser.close();
})();

总的来说，"when my page is loaded" 问题没有好的答案。 page.goto 中可用的 waitUntil 选项只是常见的启发式方法，它们可能会在多种情况下失败。

很难说你的情况出了什么问题；通常需要了解网页的内部工作才能确定其所需的加载状态。

Answer 2

我用另一个包解决了它，问题是写图像而不是渲染。所以我把大图分成4个季度。

/* Dependencies */
const chromeLauncher = require('lighthouse/chrome-launcher/chrome-launcher');
const CDP = require('chrome-remote-interface');
const fs = require('fs');

/** ARGUMENTS AND CONFIGUIRATION
 * expects arguments to be
 * -w int (width)
 * -h int (height)
 * -p int (port)
 * --url string (url)
 */

const argv = require('minimist')(process.argv.slice(2));
const windowWidth = argv.w ? argv.w : 1024;
const windowHeight = argv.h ? argv.h : 1024;
const filename = argv.filename;
const filename2 = argv.filename2;
const filename3 = argv.filename3;
const filename4 = argv.filename4;

headless=true
const launchConfig = {
    chromeFlags: [
        `--window-size=${windowWidth},${windowHeight}`,
        '--disable-gpu',
     headless ? '--headless' : ''
     ]
}
//function sleep(ms) {
 // return new Promise(resolve => setTimeout(resolve, ms));
//}


function saveScreenshot(imageData, pageURL) {
    fs.writeFile(
        filename,
        imageData.data, {encoding:'base64'},
        (err)=>{
            console.warn('error', "1");
        }
    );

}
function saveScreenshot2(imageData, pageURL) {
    fs.writeFile(
        filename2,
        imageData.data, {encoding:'base64'},
        (err)=>{
            console.warn('error', "2");
        }
    );

}
function saveScreenshot3(imageData, pageURL) {
    fs.writeFile(
        filename3,
        imageData.data, {encoding:'base64'},
        (err)=>{
            console.warn('error', "3");
        }
    );

}
function saveScreenshot4(imageData, pageURL) {
    fs.writeFile(
        filename4,
        imageData.data, {encoding:'base64'},
        (err)=>{
            console.warn('error', "4");
        }
    );

}

async function launchChrome(headless = true) {
  return await chromeLauncher.launch(launchConfig);
}

 async function saveScreenShotFromURL(pageURL) {
     const chrome = await launchChrome();
     const protocol = await CDP({port: chrome.port});
     const {Page, Runtime} = protocol;

     await Promise.all([Page.enable(), Runtime.enable()]);

     Page.navigate({url: pageURL});
     Page.loadEventFired(async () => {

     const screenshot = await Page.captureScreenshot({clip : {x:0,y:0,width : 3100,height : 3030,scale : 1}});
     const screenshot2 =await  Page.captureScreenshot({clip : {x:0,y:3030,width : 3100,height : 3030,scale : 1}});
     const screenshot3 =await  Page.captureScreenshot({clip : {x:3100,y:0,width : 3100,height : 3030,scale : 1}});
     const screenshot4 = await Page.captureScreenshot({clip : {x:3100,y:3030,width : 3100,height : 3030,scale : 1}});

        Promise.resolve( screenshot).then((imageData)=>{
            saveScreenshot(imageData,pageURL);
        });
        Promise.resolve( screenshot2).then((imageData)=>{
            saveScreenshot2(imageData,pageURL);
        });
        Promise.resolve( screenshot3).then((imageData)=>{
            saveScreenshot3(imageData,pageURL);
        });
        Promise.resolve( screenshot4).then((imageData)=>{
            saveScreenshot4(imageData,pageURL);
        });

        protocol.close();
        chrome.kill();
     });
 }

saveScreenShotFromURL(argv.url) 如果你知道如何async同时打印4张图片，请帮助我。

导航页面直到呈现最后一帧而不是 networkidel

Navigate page till rendering last frame not networkidel

javascript

google-chrome

node.js

google-chrome-devtools

puppeteer