Question

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

HTML元素带有border-radius: 50px，我将Puppeteer设置为omitBackground: true。

“保存的PNG”结果给了我一个WHITE背景，看起来像是捕获了BODY WHITE背景。

puppeteer: v1.13.0

有什么想法吗？

Answer 1

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

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

Answer 2

omitBackground: true所做的是将默认背景颜色更改为透明。根据{{3}}：

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

如果主体具有background-color: white;，则setDefaultBackgroundColorOverride不会改变它。

Answer 3

它对我有用：

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

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

木偶保存的PNG不透明

3 个答案: