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.
Related
I opened a PNG image, clicked Save As, changed to 16 color Bitmap, and saved it.
Then, MSPaint warned about loss of information about transparent and image qualities and, I clicked OK.
As a result, letters behind the black glass object disappeared clearly like this image (Before->After).
By changing PixelFormat or removing transparent area on C# (.Net 4.6.2), I tried to implement this feature just like MSPaint, however, it wasn't removed clearly. In some way, Nothing changed.
Is that not about PixelFormat or ColorDepth?
Or, Is there a way to get rid of objects behind another on PNG?
What should I do to implement that?
EDIT 1
Thank you so much, #TaW. By following your method ApplyGamma, I could solve the issue.
I'm making an app for Windows 8.1 where it is important to be able to zoom in and examine images in detail. If I just open up the bitmap and zoom in it looks like.
However when I load the image into my app and use the ScrollViewer to zoom in I get.
As it appears to be trying to interpolate pixel values for some sort of anti-aliasing.
How can I get it so that when I zoom in it shows (as best it can) the exact pixels of the image? In particular I'm using the image as the background to a canvas which is contained in a scroll viewer.
I've looked around on here and MSDN and found a pair of related questions, but as yet they don't seem to have solved my exact problem.
A discussion on WPF
A similar issue with a canvas
Older related question on pixel art
A way to use bitmap encoding (which I couldn't get to work)
Similarly phrased question
There is no easy way to go about this, your best option is to use DirectX to render the image much larger so that you can mitigate the effect of WinRT automatically interpolating pixel values.
As someone explained on MSDN and based on this outstanding request I can't see any other way to accomplish this.
Use Win2D
Win2D is a DirectX inter-op library for WinRT. With this you can render the image at a much larger size, and then set the default zoom level for the scrollViewier to be very small. Because of this when you zoom in it will appear to be that you can see the individual pixels without any fuzzy/blurry interpolation because you will actually be seeing groups of 64 pixels or so all as one color. I couldn't find any way to actually override what kind of interpolation gets done so this seems to be the best method.
Download Win2D as a NuGet package using Visual Studio, Win2D's
quickstart guide does a good job explaining some of the setup
Set up your canvas and the draw event and use the DrawImage function to render the image larger
<ScrollViewer x:Name="Scroller" ZoomMode="Enabled"
MinZoomFactor="0.1" MaxZoomFactor="20">
<canvas:CanvasControl x:Name="canvas" Draw="canvas_Draw" CreateResources="create"/>
</ScrollViewer>
In the canvas_draw function.
canvas.Width = original.Width * 10;
canvas.Height = original.Height * 10;
args.DrawingSession.DrawImage(bitmap,new Rect(0,0,original.Width*10,original.Height*10), new Rect(0,0,original.Width,original.Height), 1.0f, CanvasImageInterpolation.NearestNeighbor);
Make sure to set your canvas to be larger as well
In your code behind set the default zoom of your ScrollVieiwer to be appropriate so your image appears to be the same size.
In the page constructor
Scroller.ZoomToFactor (0.1f);
Other Ways Which I Looked Into and Didn't Work
Making the canvas very large and using BitmapEncoder/BitmapDecoder with the interpolation mode set to NearestNeighbor, this introduced lots of visual artifacts even when scaled to a power of 2 size
Render options only appear to be usable in WPF and not WinRT
It may also be possible to use some image manipulation library to simply make the bitmap 10x or so as large and then use that, but I ended up using Win2D instead.
I have an application that scan Images from scanner but some scanners put a black border around the saved image.
How can I remove that black border?
Thanks so much for your participation.
I’ve had good luck in the past process images using the Magick.NET library. It’s available on Codeplex or you can install it using NuGet in Visual Studio. Documentation for the library is a little sparse, but it’s served me well in the past.
Depending upon the exact nature of the images you’re dealing with, you might be able to do something as simple as crop off the edges where the border is and then add a white (or whatever color; I just assumed that you were scanning text documents or something) border to bring the image back up to a standardized size. If having a standardized size doesn’t matter, then of course you can just leave the image cropped. If that sounds like a viable solution, here’s some code that should accomplish what you need:
using (MagickImage image = new MagickImage(#"path_to_original"))
{
int width = image.Width, height = image.Height;
image.Crop(width - 800, height - 800);
//if the image needs to be brought back up to a standarized size
image.BorderColor = new ColorRGB(System.Drawing.Color.White);
image.Border(100, 100);
image.Write(#"path_to_cropped_image_with_no_more_black_border_around_it");
}
You will, of course need to add your own values for just how much width you need to crop off/add back in.
I'm using Ribbon from RibbonControlsLibrary.dll 4.0.0.11019, .NET 4.0, C#, WPF.
It can be downloaded with a free samples here: http://www.microsoft.com/en-us/download/details.aspx?id=11877
The problem comes when a RibbonToggleButton is displayed. Then it's image seems to be a little bit broken, like a part of image is shifted for a few pixels.
EDIT: Thanks to kind people I can post and image now:
Here are some details:
Image is displayed in it's large variant
Image size is 32x32
I set image scaling to none for all the images of Ribbon
Image is broken only when the text in RibbonToggleButton has 1 line
Same image displays correctly in any other kind of button (RibbonButton, RibbonSplitButton etc.)
The image is displayed correctly when I set the font size in Windows to Medium (125%)
My OS is Windows 8
When I set the VerticalContentAlignment for the toggle button to "Bottom", the Image starts to display correctly, but the whole Ribbon starts to look ugly.
I experience this problem for all the toggle buttons, including those which are in a Microsoft's free samples.
I guess that probably the Image doesn't have enough space, so it's compressed from 32x32 to some smaller size.
I use the theme that is made of Microsoft's Generic theme, that is included in the RibbonControlsLibrary.dll. I guess I could fix the RibbonToggleButton template somehow, but I have no idea what to fix there.
Any ideas?
In the xaml declaration of your UserControl / Window put that line:
RenderOptions.BitmapScalingMode="HighQuality"
I'd like to use ImageResizer.net for a complex Pan/Zoom/Scale operation:
Here's a pure CSS way to crop/pan/zoom an image:
<div style="width: 300px; height: 100px; overflow:hidden;">
<img height="200" style="position:relative; top: -50px; left: 5px" src="http://placehold.it/250x250"/>
</div>
(see: http://jsfiddle.net/tbmBt/18/ for an example of this)
While this works great in most modern browsers, it is brittle, chatty, and broken in some email clients (and probably older browsers).
So... once a user is "done" with some HTML for an email (or old browser), I'd like to pull all those CSS attributes and make an image that takes them all into account, producing a new image of the correct dimensions...
I have basically already worked this out:
Scale source image to the correct dimensions (based on "height"
attribute of IMG tag)
Crop image based on image offsets and div
container dimensions.
Pad image based on cropped image size and
container dimensions. (When no padding is needed, use JPEG at 95%
quality, when padding is needed, use PNG, with bgcolor transparent).
This works great, but I'd prefer to use the URL API and to only have to process the image once instead of "three" times.
I believe that I could achieve this in one step using an affine transformation. At this point, I'm thinking that would require a new custom plugin (and if that's the only way to achieve what I'm after, I might even implement it myself and Open Source it..).
Any idea about a more efficient way to do what I'm trying to do?
Yes, arbitrary affine transformations can be done through the URL API, but you have to know the order of events and you'll have to split the cropping and padding into separate commands.
Cropping happens before resizing, so you'll need to figure out your viewport dimension and split them into two sets of coordinates.
1) Crop values are x1,y1,x2,y2, in source image coordinates. You can use cropxunits=100 and cropyunits=100 to make x1,y1,x2,y2 percentages of width/height respectively if you don't know the viewport coordinates in image dimensions. You can also use arbitrary values for cropxunits and cropyunits to make the math easier.
Negative crop values will be relative to bottom-right instead of top left, so after copying the absolute value of negative (or, for far right values, the excess amounts) into variables for padding later, set them to zero or width/height/cropxunits/cropyunits.
2) Add padding if needed with margin=left, top, right, bottom. Units are display pixels, not source pixels, so these values should be unscaled.
3) Scale - This is where you apply width=x&height=y&mode=max to get the appropriate display size. Left off, it will show 1:1 zoom, which may or may not be desired. x and y here should be the desired width/height of the image in display pixels, NOT the canvas.
See full command reference for details.
You can definitely do this as a plugin, but I'd suggest doing a javascript implementation first, then seeing if you want to bother putting the wrapping on the server in plugin form. Either way, I've had this question a few times and an MIT-licensed code sample would be very helpful to the community.