Puppeteer 保存的 PNG 不透明

Question

我正在使用 Puppeteer 来截屏带有 ID 名称的 HTML 元素。

HTML 元素与 border-radius: 50px 一起使用，我将 Puppeteer 设置为 omitBackground: true。

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

puppeteer: v1.13.0

有什么想法吗？

Answer 1

omitBackground: true 所做的是将默认背景颜色更改为透明。根据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.

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

Answer 2

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

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

Answer 3

它对我有用：

formatImage = {
        type: 'jpeg',
        quality: 100,
        fullPage: true,
        omitBackground: true,
};

我认为 omitBackgroun 仅适用于 JPEG 类型。因为我有同样的错误，它用类型解决：'jpeg'

Puppeteer 保存的 PNG 不透明

Puppeteer saved PNG is NOT transparent

css

background

transparent

puppeteer