How to do Control.DrawToBitmap with transparency s

2019-08-28 05:26发布

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/

1条回答
等我变得足够好
2楼-- · 2019-08-28 06:05

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.

查看更多
登录 后发表回答