"Emulation.setDefaultBackgroundColorOverride" issue (transparent PNG screenshot)

ropi...@gmail.com

unread,

Jul 13, 2017, 6:58:14 AM7/13/17

to headless-dev

Hello,

I have issues making a screenshot with a transparent background using CDP with the Emulation.setDefaultBackgroundColorOverride method.

I use a node script with the chrome-remote-interface package.

My problem is related to this chromium issue which has been apprently resolved, but I'm not managing to make it work.

Here is my headless remote debugging start command:

google-chrome --hide-scrollbars --remote-debugging-port=9222 --disable-gpu --headless

Here is the script:

const CDP = require('chrome-remote-interface');
const fs = require('fs');

CDP(async (client) => {
    const {Page, Emulation} = client;

    try {
        await Page.enable();

        await Emulation.setDefaultBackgroundColorOverride({r: 0, g: 0, b: 0, a: 0});
        await Emulation.setVisibleSize({width: 500, height: 500});

        await Page.navigate({url: 'http://localhost/transparency.html'});
        await Page.loadEventFired(async () => {
            const screenshot = await Page.captureScreenshot();
            const buffer = new Buffer(screenshot.data, 'base64');

            fs.writeFile('transparency.png', buffer, function(err) {
                if (err) {
                    console.error(err);
                } else {
                    console.log('Success');
                }

                client.close();
            });
        });
    } catch (err) {
        console.error(err);
        client.close();
    }
}).on('error', (err) => {
    console.error(err);
});

And here is the html file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body style="background-color: transparent;">
        TEST TEST TEST TEST TEST
    </body>
</html>

The resulting png file has a white background.

Resulting screenshot:

The thing is that if I do it with the command line with the --default-background-color option instead of using the script, I get my transparent background.

google-chrome --screenshot --headless --default-background-color=0 --disable-gpu --hide-scrollbars http://localhost/transparency.html

Resulting screenshot:

OS Version: Debian 8.7

Chrome: Version 59.0.3071.115 (Official Build) (64-bit)

Do you see what I could be doing wrong?

Thanks

Eric Seckler

unread,

Jul 13, 2017, 8:05:34 AM7/13/17

to ropi...@gmail.com, headless-dev

Could you try issuing setDefaultBackgroundColorOverride right before taking the screenshot?

i.e.:

...

await Emulation.setDefaultBackgroundColorOverride({r: 0, g: 0, b: 0, a: 0});

const screenshot = await Page.captureScreenshot();

...

--
You received this message because you are subscribed to the Google Groups "headless-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to headless-dev...@chromium.org.
To post to this group, send email to headle...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/headless-dev/19ae3790-d529-4ac0-b1f3-2f3f537bd6e4%40chromium.org.

ropi...@gmail.com

unread,

Jul 13, 2017, 9:25:49 AM7/13/17

to headless-dev, ropi...@gmail.com

There is still the same problem, resulting png has a white background.

const CDP = require('chrome-remote-interface');
const fs = require('fs');

CDP(async (client) => {
    const {Page, Emulation} = client;

    try {
        await Page.enable();

        await Emulation.setVisibleSize({width: 500, height: 500});

        await Page.navigate({url: 'http://localhost/transparency.html'});
        await Page.loadEventFired(async () => {

            await Emulation.setDefaultBackgroundColorOverride({r: 0, g: 0, b: 0, a: 0});
            const screenshot = await Page.captureScreenshot();

            const buffer = new Buffer(screenshot.data, 'base64');

            fs.writeFile('transparency.png', buffer, function(err) {
                if (err) {
                    console.error(err);
                } else {
                    console.log('Success');
                }

                client.close();
            });
        });
    } catch (err) {
        console.error(err);
        client.close();
    }
}).on('error', (err) => {
    console.error(err);
});

Eric Seckler

unread,

Jul 13, 2017, 9:29:03 AM7/13/17

to ropi...@gmail.com, headless-dev

Ah, I think you are missing the color parameter in the command. I think it needs to look like this:

await Emulation.setDefaultBackgroundColorOverride({color: {r: 0, g: 0, b: 0, a: 0}});

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/headless-dev/fff8cbb6-e304-41a7-afdc-29d9d69e805c%40chromium.org.

ropi...@gmail.com

unread,

Jul 13, 2017, 9:34:20 AM7/13/17

to headless-dev, ropi...@gmail.com

Oh thank you very much it works well now, I've apparently read the documentation too fast by only passing the rgba object without the name of the parameter.

Thanks for your help Eric.

Oleg

unread,

Jul 13, 2017, 10:57:15 AM7/13/17

to headless-dev, ropi...@gmail.com

You are not alone, took me hours to make it work too. This is a confusing part of documentation.

Reply all

Reply to author

Forward