New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render with Transparent background #154

Open
brant-hwang opened this Issue Feb 20, 2014 · 12 comments

Comments

Projects
None yet
8 participants
@brant-hwang

brant-hwang commented Feb 20, 2014

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

This comment has been minimized.

Owner

laurentj commented Feb 20, 2014

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

This comment has been minimized.

Contributor

DarrenCook commented Feb 21, 2014

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

This comment has been minimized.

Owner

laurentj commented Feb 21, 2014

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

This comment has been minimized.

brant-hwang commented Feb 24, 2014

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

This comment has been minimized.

urururu commented Feb 25, 2014

Ooh. I also need Transparent Background png image!

Thank you in advance!

@skinandbones

This comment has been minimized.

skinandbones commented Mar 5, 2014

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

This comment has been minimized.

caseyyee commented Oct 9, 2014

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

This comment has been minimized.

caseyyee commented Oct 9, 2014

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

laurentj added a commit that referenced this issue Oct 10, 2014

@neopostmodern

This comment has been minimized.

neopostmodern commented Aug 3, 2015

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

This comment has been minimized.

neopostmodern commented Jun 18, 2016

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

This comment has been minimized.

Jip-Hop commented Jul 25, 2016

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.

128-0000ff
128-ffff00
128

127-0000ff
127-ffff00
127

@laurentj

This comment has been minimized.

Owner

laurentj commented Dec 15, 2017

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 :-(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment