At the moment I'm using Control
DrawToBitmap
method to capture my WebBrowser like following.
var bmp = new Bitmap(640,480, PixelFormat::Format32bppArgb)
var web = (System.Windows.Forms.Control)sender;
web.DrawToBitmap(bmp, Rectangle(0, 0, 640,480));
My Bitmap
supports Alpha channel but this code doesn't save transparency.
Here is the webpage example :
http://jsfiddle.net/zPtPN/
EDIT 2: opacity on embedded browser
With CEF
(Chromium Embedded Framework from Google) you should do as follows. This may or may not apply to the default .NET Internet Explorer control.
body
{
background-color: transparent;
}
To overlay this you have to render to a buffer that was cleared. That buffer IS NOT the final rendered raster but an intermediate in-memory buffer that retains VERY MUCH the alpha channel. As long as the buffer is cleared (filled with transparent pixels), you grab the buffer with the full ARGB32 channels and overlay it correctly, you should get what you want.
Best is, you try as far as you can go, then take a screenshot and post a new question specifying that you are using an embedded browser. Also specify the browser version because it will change from one machine to the other: Options for embedding Chromium instead of IE WebBrowser control with WPF/C#
The Bitmap
might contain alpha channel information, but not all file formats support it. You should save the image as a *.PNG
with ARGB32
lossless mode. A simple *.BMP
file will not suffice.
Look at this answer to know not just how to save as PNG but also how to actually get the transparency right:
c# Bitmap.Save transparancy doesn't save in png
To grab transparency from the web page you can try this UGLY, CUMBERSOME, HORRIBLE technique that has tons of problems:
Use a unique color for the body background, like #ffe000
. Render the page, grab it as before.
The transparent parts will show the body's background showing through.
At this point you can filter the image by setting its TransparencyKey to the color of the background -OR- by substituting all pixels of that color with a fully transparent pixel color (just change the alpha channel's value from 255 to 0).
Why this is horrible? Because the results will be ugly:
- fonts are smoothed and will have shades of that color, so you can't get them partially transparent, they will retain opacity and look horrible much like gifs looked back in the ole'90 (they are called rendering artifacts).
- if you use pretty CSS3 stuff like
border-radius
or box-shadow
the same artifacts as above arise: border pixels with shades (anti-aliasing) will look horrible.
Ugly Example here.
So how can you remove these artifacts? You can't.
I highly recommend a completely different approach to your problem.
By the way, what do you want to achieve? Are you using CEF
or other embedded browser technology that you want to overlay somehow?
Maybe there are other ways I can help you with....
EDIT: why the ffff
<div>
does not show
You set the style to:
background-color: transparent; opacity:0;
Now, the background of the <div>
will be transparent and show what is behind (the <body>
's background-color
). When you set opacity
instead, you say to make the whole <div>
(contained images and texts included) transparent. Setting it to 0
means totally invisible.