Allow capturing transparent screenshots #354
Conversation
lib/Page.js
Outdated
| let result = await this._client.send('Page.captureScreenshot', { format, quality: options.quality, clip }); | ||
| if (options.noBackground) | ||
| await this._client.send('Emulation.setDefaultBackgroundColorOverride', { color: { r: 255, g: 255, b: 255, a: 1 } }); |
There was a problem hiding this comment.
Sending no color should go back to the default.
docs/api.md
Outdated
| @@ -605,6 +605,7 @@ Shortcut for [`keyboard.down`](#keyboarddownkey-options) and [`keyboard.up`](#ke | |||
| - `y` <[number]> y-coordinate of top-left corner of clip area | |||
| - `width` <[number]> width of clipping area | |||
| - `height` <[number]> height of clipping area | |||
| - `noBackground` <[boolean]> When true, hides default white background and allows capturing screenshots with transparency. | |||
There was a problem hiding this comment.
Hides default white background and allows capturing screenshots with transparency. Defaults to false
examples/screenshot.js
Outdated
| @@ -23,6 +23,9 @@ const page = await browser.newPage(); | |||
| await page.goto('http://example.com'); | |||
| await page.screenshot({path: 'example.png'}); | |||
|
|
|||
| await page.setContent('TRANSPARENT BACKGROUND'); | |||
| await page.screenshot({path: 'transparent.png', noBackground: true}); | |||
There was a problem hiding this comment.
I am not sure if this warrants a place in the example.
docs/api.md
Outdated
| @@ -605,6 +605,7 @@ Shortcut for [`keyboard.down`](#keyboarddownkey-options) and [`keyboard.up`](#ke | |||
| - `y` <[number]> y-coordinate of top-left corner of clip area | |||
| - `width` <[number]> width of clipping area | |||
| - `height` <[number]> height of clipping area | |||
| - `noBackground` <[boolean]> Hides default white background and allows capturing screenshots with transparency. Defaults to `false`. | |||
There was a problem hiding this comment.
How about calling this background which defaults to true, or maybe transparentBackground which defaults to false? The double negation in noBackground: false feels weird.
There was a problem hiding this comment.
I prefer parameters that default to false, hence the name. transparentBackground works for me as well, but I don't think it is particularly better. The parameter controls behavior that is somewhat involved, so it is hard to find a simple name for it. How can background be transparent? Is it when there is noBackground? 😝
No description provided.