Render with Transparent background

[brant-hwang]

i want transparent background color PNG image

so, i'm mark up with HTML follow codes.

body { margin:0px; padding:0px; width:720px; height:720px; background: transparent; }

when render with phantomjs, result PNG is transparent image,

but slimerJS result image doesn't transparent PNG

please check this issue

thanks.

[laurentj]

First, I can't do anything. Canvas is using to render the window into png. I could try to have a transparent window but I'm not sure it can be done on all system.

Second, in any browser, you always have a solid background, even if you use a transparent background. So why do you want a capture with a transparent background?

[DarrenCook]

i want transparent background color PNG image

(Laurent, this is desirable for the same reason transparent PNGs exist at all. E.g. maybe the screen capture is going to move around on top of another page, or just has to be used in a page where the designer changes the background colour a lot.)

body { margin:0px; padding:0px; width:720px; height:720px; background: transparent; }

Did you try: background:rgba(0,0,0,0)

as described in the link Laurent gave. "transparent" is supposed to mean the same thing, though.

Another idea might be to try opening your content in an iframe, and just render the iframe??

Darren

[laurentj]

no, I cannot render in an iframe. it would complexify a lot all the mecanism of the frame API (webpage.frameContent etc) and the internal network listeners...

maybe the screen capture is going to move around on top of another page, or just has to be used in a page where the designer changes the background colour a lot

Sorry I don't still understand. From my point of view, when I want to make a capture, this is to see what the user is supposed to see. So no transparent background since a page in a browser has always a blank background by default. I would like a real case where having a transparent background is require.

(note: don't worry, even if I don't understand, I'll try to fix this issue :-) )

[brant-hwang]

laurentj. Thanks your reply.

this issue is very important my project.

it is rough description of my project.

1. iOS / Android Application needs Transparent Product Image for list View.
2. So, Back-end web administrator will choice transparent image, and then input Product's information. ( price, quantity, desc.... etc )
3. when administrator clicked 'Generate' button, result rendered image contains information text with original image.

do you understand my intention?

this is very very import issue for my project.

please examination this issue

i look forward to next version. ( fixed as soon as possible, i hope T_T )

thank you!

[urururu]

Ooh. I also need Transparent Background png image!

Thank you in advance!

[skinandbones]

This issue is also important to me and I've spent a good amount of time looking into it. As @laurentj mentioned, we're hitting a limitation of Gecko. You can provide different color backgrounds to canvas#drawWindow, but you can't make the background of the page transparent because global background preferences get in the way. I've tried various things with profiles, IFRAMEs, etc. and still have not been successful.

I was able to workaround my issue using image masks and canvas. However, it's not a general solution.

[caseyyee]

Ah crud. I wish I had found this earlier. It's really important for my project that this renders to a transparent background like Phantom does. I am using the rendered output as assets in a project environment that does not render HTML natively but can benefit from the layout tools which HTML/CSS make available.

[caseyyee]

Ok guys, so i had to pull some silly tricks to get this going, but it works really nicely.

I render two images of the web page layout. One with a pure blue background #0000ff and one with a pure yellow background #ffff00, then use imagemagick to process the alpha.

// do this once for each color.
page.evaluate(function() {
    document.body.style.background = '#0000FF';  
});
// save page to disk
page.render(index-0000ff.png');

I then end up with two files, index-0000ff.png and index-ffff00.png from my slimer script.

I run those through imagemagick and have the composited image with alpha saved as index.png

convert index-ffff00.png index-0000ff.png -alpha off \( -clone 0,1 -compose difference -composite -separate -evaluate-sequence max -auto-level -negate \) \( -clone 0,2 -fx "v==0?0:u/v-u.p{0,0}/v+u.p{0,0}" \) -delete 0,1 +swap -compose Copy_Opacity -composite index.png

Voila! Perfect transparent background output of your web page.

I found this imagemagick technique off of the imagemagick site: http://www.imagemagick.org/Usage/masking/#known_bgnd

[neopostmodern]

I just wanted to add that the above approach even works with (semi-)transparent i.e. translucent elements on your page. It's exactly what you'd expect, still I was wondering about it when I read this - so I wanted to leave this note for the future reader.

[neopostmodern]

Just to bump this: Is this comment (pasted below) to the assumed root of the problem mentioned by @laurentj above new? Does it change anything?

Hints: If 'rgba(0,0,0,0)' is used for the background color, the drawing will be transparent wherever the window is transparent. Top-level browsed documents are usually not transparent because the user's background-color preference is applied, but IFRAMEs are transparent if the page doesn't set a background. If an opaque color is used for the background color, rendering will be faster because we won't have to compute the window's transparency.

[Jip-Hop]

I would also love a solution to this. I've tried the ImageMagick approach by @caseyyee, but it doesn't perform so well with anti-aliasing. Text becomes really thin after processing the transparency.

[laurentj]

I re-tried rgba(0,0,0,0) with drawWindow() + transparent background set on the XUL window etc, with Firefox 57: it does not work :-(