Puppeteer保存的PNG不透明

Question

我正在使用Puppeteer来屏幕捕获具有ID名称的HTML元素。

HTML元素与border-radius: 50px和我用omitBackground: true设置Puppeteer。

保存的PNG结果给了我一个白色背景，看起来它捕获了BODY WHITE背景。

puppeteer: v1.13.0

有任何想法吗？

Answer 1

如果页面有背景颜色，您要删除它，然后使用omitBackground: true的page.screenshot选项：

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

Answer 2

omitBackground: true所做的是将默认背景颜色更改为透明。据the documentation说：

Emulation.setDefaultBackgroundColorOverride设置或清除帧的默认背景颜色的覆盖。如果内容未指定，则使用此覆盖。

如果身体有background-color: white;，setDefaultBackgroundColorOverride不会改变。