New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how can I `page.screenshot()` **after** img onload #1719

Closed
lishengzxc opened this Issue Jan 4, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@lishengzxc

lishengzxc commented Jan 4, 2018

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: 0.12.0
  • Platform / OS version: centos7
  • URLs (if applicable):
  • Node.js version:8.9.0

What steps will reproduce the problem?

const browser = await puppeteer.launch({
  executablePath: app.config.chrome,
  args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
const page = await browser.newPage();


const contentString = `
<html>
  <head>
   <style>
     * { box-sizing: border-box; }
     body { margin: 0; }
     #tpl { display: inline-block; }
   </style>

  </head>
  <body>
    <div id="tpl"><img src="..." /></div>
  </body>
</html>`;

// My html contains `<img src="" />`

await page.setContent(contentString);


const dimensions = await page.evaluate(() => {
  const container = document.getElementById('tpl');

  return {
    width: container.offsetWidth,
    height: container.offsetHeight
  }
});

await page.setViewport({ width: dimensions.width, height: dimensions.height });

const image = await page.screenshot();

// sometimes, `page.screenshot()` before img onload

await browser.close();

return image;

What is the expected result?
how can I page.screenshot() after img onload?

What happens instead?
sometimes, page.screenshot() before img onload

@yale8848

This comment has been minimized.

Show comment
Hide comment
@yale8848

yale8848 Jan 4, 2018

you can try this:

const watchDog = page.waitForFunction("document.getElementsByTagName('img')[0].naturalHeight >0 ");
 await watchDog;
...

const image = await page.screenshot();

yale8848 commented Jan 4, 2018

you can try this:

const watchDog = page.waitForFunction("document.getElementsByTagName('img')[0].naturalHeight >0 ");
 await watchDog;
...

const image = await page.screenshot();
@lishengzxc

This comment has been minimized.

Show comment
Hide comment
@lishengzxc

lishengzxc Jan 4, 2018

I solved it.

const imgs = await page.$$eval('img', imgs => Promise.all(
  imgs.map(img => new Promise(resolve => img.onload = resolve))
));

lishengzxc commented Jan 4, 2018

I solved it.

const imgs = await page.$$eval('img', imgs => Promise.all(
  imgs.map(img => new Promise(resolve => img.onload = resolve))
));

@lishengzxc lishengzxc closed this Jan 4, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment