0

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/

Mohsen Sarkar
  • 5,910
  • 7
  • 47
  • 86
  • Related: [How to fix a opacity bug with DrawToBitmap on WebBrowser Control?](http://stackoverflow.com/q/21697048/1768303) – noseratio Jan 15 '15 at 04:15

1 Answers1

1

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.

Community
  • 1
  • 1
pid
  • 11,472
  • 6
  • 34
  • 63
  • Ok, this might be, but still `PNG` is the best way to go. There was probably some other problem. If you stick to `BMP` it will never work because `BMP`s simply don't have alpha channels. – pid Feb 10 '14 at 13:20
  • Yes I have double-checked this. Without MakeTransparent method my capture isn't transparent – Mohsen Sarkar Feb 10 '14 at 13:22
  • grabbing pixels from raster (as with `web.DrawToBitmap()`) you actually get the color content of each pixel in the raster as this is supposed to do. This does not mean that transparency is taken into account, because transparency exists only in the source image data, not in the rendered output. How would a monitor show transaprency? Maybe Google Glass could show transparent backgrounds, but what you try to do is pretty different. All I can come up with is try [TransparencyKey](http://msdn.microsoft.com/en-us/library/system.windows.forms.form.transparencykey(v=vs.110).aspx) but I doubt it. – pid Feb 10 '14 at 13:27
  • So I can't save a PNG or any image format that contains the alpha channel with DrawToBitmap ? Is there alternative ways to achieve this ? – Mohsen Sarkar Feb 10 '14 at 13:35
  • When you *grab* from the screen or do a *screenshot* you get the rendered output of the computations. If you post an example image of what you get and another of what you want *MAYBE* there is a complex way to regain transparency, but I doubt it very much. – pid Feb 10 '14 at 13:40
  • Thank you I have already posted it as a HTML page, Please check http://jsfiddle.net/zPtPN/ The first div has opacity of 0% so it shouldn't be appeared on my output result but whenever I save the Bitmap I see first div is printed. In other words (ffff) is visible in my output which I don't want to. – Mohsen Sarkar Feb 10 '14 at 13:48
  • Ok I'll post a *HACK* that I absolutely discourage to use, it is ugly cumbersome and error-prone. – pid Feb 10 '14 at 13:52
  • Thank you so much! Even if you open the link I gave you then you see the 'ffff' (first div) isn't showing. I really don't know why the first div is appearing in my output! – Mohsen Sarkar Feb 10 '14 at 13:53
  • I've made another EDIT on my answer about the `ffff` div. – pid Feb 10 '14 at 14:04
  • Sorry I forgot to tell you yes I'm trying to use embedded browser but with .NET provided WebBrowser class. It would be very helpful if you have any better alternative ways! – Mohsen Sarkar Feb 10 '14 at 14:09
  • I have tried your link and the opacity is set to 100% from start of fade till end of it! – Mohsen Sarkar Feb 10 '14 at 14:26
  • Thanks pid, I want to let you know there was a bug with DrawToBitmap which found it on MSDN. So I made another question which describe more. The link to MSDN in in my other question if you are interested to check it out. http://stackoverflow.com/questions/21697048/how-to-fix-a-opacity-bug-with-drawtobitmap-on-webbrowser-control – Mohsen Sarkar Feb 11 '14 at 12:04