Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Render with Transparent background #154
i want transparent background color PNG image
so, i'm mark up with HTML follow codes.
when render with phantomjs, result PNG is transparent image,
but slimerJS result image doesn't transparent PNG
please check this issue
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?
(Laurent, this is desirable for the same reason transparent PNGs exist
Did you try:
as described in the link Laurent gave. "transparent" is supposed to mean
Another idea might be to try opening your content in an iframe, and just
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...
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 :-) )
laurentj. Thanks your reply.
this issue is very important my project.
it is rough description of my project.
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 )
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.
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.
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.
I then end up with two files,
I run those through imagemagick and have the composited image with alpha saved as
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
added a commit
Oct 10, 2014