Puppeteer saved PNG is NOT transparent

问题: I am using Puppeteer to screen capture an HTML element with ID name. The HTML element is with border-radius: 50px and I set Puppeteer with omitBackground: true. The Sa...

问题:

I am using Puppeteer to screen capture an HTML element with ID name.

The HTML element is with border-radius: 50px and I set Puppeteer with omitBackground: true.

The Saved PNG result gave me is a WHITE background, looks like it captured the BODY WHITE background.

puppeteer: v1.13.0

Any ideas?


回答1:

If the page has a background color you want to remove that, and then use the omitBackground: true option of page.screenshot:

await page.evaluate(() => document.body.style.background = 'transparent');
await page.screenshot({
    path: 'example.png',
    omitBackground: true,
});

回答2:

What omitBackground: true does is changing the default background color to transparent. According to the documentation:

Emulation.setDefaultBackgroundColorOverride Sets or clears an override of the default background color of the frame. This override is used if the content does not specify one.

If the body has a background-color: white;, setDefaultBackgroundColorOverride won't change that.

  • 发表于 2019-03-15 00:14
  • 阅读 ( 66 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除