This has become a serious blocker for a program I'm working on to manipulate images that have Alpha channels.
Many of the images I have contain color information where an Alpha channel is completely transparent, and yet as soon as I try to load them into System.Drawing.Graphics, it changes anything with of Alpha of 0, into Black with an Alpha of 0.
Here is a basic sample of the issue.
I have looked around trying to find a reason, answer, or workaround, but I haven't found anything that even alludes to this issue.
Any help would be appreciated at this point.
var myTestTransparentColor = Color.FromArgb(0, 255, 128, 64);
var image = new Bitmap(135, 135, PixelFormat.Format32bppArgb);
using (var g = Graphics.FromImage(image))
{
g.Clear(myTestTransparentColor);
}
var color = image.GetPixel(0, 0);
Debug.Assert(color == myTestTransparentColor, "channels must match original");
EDIT:
After further testing I don't really see a way ahead by using System.Drawing.Graphics, so my only solution which is not really an answer, is to avoid System.Drawing.Graphics entirely. Looking through my code, it looks like I can avoid it.
Its just after years of using System.Drawing.Graphics for drawing shapes, planting text over images, I find it irritating for System.Drawing.Graphics to have a significant drawback like this.
I still would like to know if I can use System.Drawing.Graphics and keep my ARGB intact, but I guess I can live without it for now.
I think Vincent Povirk has answered my question appropriately here: Drawing PixelFormat32bppPARGB images with GDI+ uses conventional formula instead of premultiplied one
"The format of your foreground image doesn't matter (given that it has alpha) because you're setting it to a Gdiplus::Color. Color values are defined as non-premultiplied, so gdiplus multiplies the components by the alpha value when it clears the foreground image. The alternative would be for Color values to have different meaning depending on the format of the render target, and that way lies madness."
"If you really want this level of control over the rendering, you'll have to lock the bitmap bits and do it yourself."
So, I am doing it myself.
Related
I'm using the Svg.Core library (version 3.0.49.2) to render SVGs (defined in strings) to PNG images. No matter what I do, any shape seems to be rendered with a black stroke and a black fill.
Here's the code I'm using for a simple rectangle, as an example:
var svgString = #"<svg width=""300"" height=""300"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink""><rect x=""5"" y=""5"" height=""90"" width=""50"" fill=""#ef0000"" stroke=""#00ef00"" /></svg>";
var svgDocument = SvgDocument.FromSvg<SvgDocument>(svgString);
var bitmap = svgDocument.Draw();
bitmap.Save(fileName, ImageFormat.Png);
which ends up rendering a rectangle of the correct height and width, but all black:
I've seen a number of posts that mention various versions of inlining styles, but regardless of whether I'm using a style="" approach or a fill="", the problem continues. Also seems to happen without fill color specified or using standard color names instead of RGB values.
Any help or ideas are appreciated!
The best answer I have come up with here is from the comment earlier. If you put the following around it: svgDoc.Color = new SvgColourServer(Color.DarkGreen); svgDoc.StopColor = new SvgColourServer(Color.DarkGreen); svgDoc.Stroke = new SvgColourServer(Color.DarkGreen); svgDoc.Fill = new SvgColourServer(Color.DarkGreen); , you will get colors in the SVG. Posting this as the answer in case anyone runs into this issue down the road.
I'm having difficulties with System.Drawing bugs in C#. I've been trying to diagnose it for 5 months.
My program basically does photoshop brushes. Example below.
It works well on images that are absolutely opaque. But, if the image has any transparency at all, it begins to cause strange errors. Consider this.
The gray border on every line, and highly visible in the second picture, is an alpha artifact. If I draw over the same region, I can get the color as dark as (127, 127, 127) in RGB, which is perfect gray, and I don't think it's a coincidence.
This error occurs when opening/closing the dialog, undo/redo, and drawing over transparent regions.
Anyway, I'd love to get help with fixing this GDI+ issue. I've been here:
Color value with alpha of zero shows up as black
GDI+ Bug: Anti-Aliasing White On Transparency
C# Resized images have black borders
Ghost-borders ('ringing') when resizing in GDI+
How to solve grayish frame issue when Scaling a bitmap using GDI+
DrawImage() function over WinForms does not work correctly
http://www.codeproject.com/Articles/14884/BorderBug
Possibility: there is a Border Bug where resized images include pixels outside the image, which are assumed Black, and they're involved in the calculation (resulting in blackened borders)
But that doesn't explain how copying and writing the image over the source causes this effect.
Possibility: creating a new bitmap automatically premultiplies each pixel by its alpha.
I've tried a tested workaround that locks the bits and copies them over (to avoid multiplying by alpha), but this doesn't solve my issue.
I've tried all the solutions presented here, which I summarize below:
Any combination of InterpolationMode.NearestNeighbor, SmoothingMode.None, and PixelOffsetMode.Half.
Clearing with a transparent color, Color.White, and Color.Black, along with the above attempts as well.
Workarounds for cloning bitmaps, sometimes in conjunction with other workarounds above.
Using an ImageAttributes object and setting WrapMode to TileFlipXY, sometimes in conjunction with above workarounds.
Using Color.ConvertFromPremultipliedAlpha and Color.ConvertToPremultipliedAlpha, with a definitely bad effect.
Here is the main file, which includes all the relevant code.
A tiny bit more discussion on my original post off-site.
I have an image where I need to change the background colour (E.g. changing the background of the example image below to blue).
However, the image is anti-aliased so I cannot simply do a replace of the background colour with a different colour.
One way I have tried is creating a second image that is just the background and changing the colour of that and merging the two images into one, however this does not work as the border between the two images is fuzzy.
Is there any way to do this, or some other way to achieve this that I have no considered?
Example image
Just using GDI+
Image image = Image.FromFile("cloud.png");
Bitmap bmp = new Bitmap(image.Width, image.Height);
using (Graphics g = Graphics.FromImage(bmp)) {
g.Clear(Color.SkyBlue);
g.InterpolationMode = InterpolationMode.NearestNeighbor;
g.PixelOffsetMode = PixelOffsetMode.None;
g.DrawImage(image, Point.Empty);
}
resulted in:
Abstractly
Each pixel in your image is a (R, G, B) vector, where each component is in the range [0, 1]. You want a transform, T, that will convert all of the pixels in your image to a new (R', G', B') under the following constraints:
black should stay black
T(0, 0, 0) = (0, 0, 0)
white should become your chosen color C*
T(1, 1, 1) = C*
A straightforward way to do this is to choose the following transform T:
T(c) = C* .* c (where .* denotes element-wise multiplication)
This is just standard image multiplication.
Concretely
If you're not worried about performance, you can use the (very slow) methods GetPixel and SetPixel on your Bitmap to apply this transform for each pixel in it. If it's not clear how to do this, just say so in a comment and I'll add a detailed explanation for that part.
Comparison
Compare this to the method presented by LarsTech. The method presented here is on the top; the method presented by LarsTech is on the bottom. Notice the undesirable edge effects on the bottom icon (white haze on the edges).
And here is the image difference of the two:
Afterthought
If your source image has a transparent (i.e. transparent-white) background and black foreground (as in your example), then you can simply make your transform T(a, r, g, b) = (a, 0, 0, 0) then draw your image on top of whatever background color you want, as LarsTech suggested.
If it is a uniform colour you want to replace you could convert this to an alpha. I wouldn't like to code it myself!
You could use GIMP's Color To Alpha source code (It's GPL), here's a version of it
P.S. Not sure how to get the latest.
Background removal /replacement, IMO is more art than science, you’ll not find one algorithm fit all solution for this BUT depending on how desperate or interested you are in solving this problem, you may want to consider the following explanation:
Let’s assume you have a color image.
Use your choice of decoding mechanism and generate a gray scale / luminosity image of your color image.
Plot a graph (metaphorically speaking) of numeric value of the pixel(x) vs number of pixels in the image for that value(y). Aka. a luminosity histogram.
Now if your background is large enough (or small), you’d see a part of the graph representing the distribution of a range of pixels which constitute your background. You may want to select a slightly wider range to handle the anti-aliasing (based on a fixed offset that you define if you are dealing with similar images) and call it the luminosity range for your background.
It would make your life easier if you know at least one pixel (sample/median pixel value) out of the range of pixels which defines your background, that way you can ‘look up’ the part of the graph which defines your background.
Once you have the range of luminosity pixels for the background, you may run through the original image pixels, compare their luminosity values with the range you have, if it falls within, replace the pixel in the original image with the desired color, preferably luminosity shifted based on the original pixel and the sample pixel, so that the replaced background looks anti-aliased too.
This is not a perfect solution and there are a lot of scenarios where it might fail / partially fail, but again it would work for the sample image that you had attached with your question.
Also there are a lot of performance improvement opportunities, including GPGPU etc.
Another possible solution would be to use some of the pre-built third party image processing libraries, there are a few open source such as Camellia but I am not sure of what features are provided and how sophisticated they are.
I have to write several small vertical gradients (on a loop) and so I think it's faster to re-use an existing LinearGradientBrush (correct?)
But this isn't what I expected to happen...
Drawing2D.LinearGradientBrush myBrush = new Drawing2D.LinearGradientBrush(new Rectangle(0, 0, 200, 200), Color.Red, Color.Black, Drawing2D.LinearGradientMode.Vertical);
myBrush.LinearColors[1] = Color.Blue;
MsgBox(myBrush.LinearColors[1].ToString); //Returns black
So, is there either an error on the above code, or a better way to get several vertical gradients on a loop, or a different way to change the LinearGradientBrush's colors?
Thanks :)
Constructing a brush costs almost nothing compared to the work done to actually draw something with the brush.
Also, try setting the entire array instead of replacing a single element.
myBrush.LinearColors = new Color[2] { Color.Blue, Color.Whatever };
This is perhaps academic (and perhaps much of it is obvious in retrospect!), but the reason changing a single color doesn't work is that the colors are extracted from non-managed code before being presented to you - you are given a copy of the color and that is what you are changing. Or, to put it more formally, the l-value in your statement is passed by value and there is no mechanism for updating the original.
When you change the whole gradient array the property setter for the array writes the changes back to the unmanaged object.
I have a png image file with alpha blending of its own. Now I want to load it onto a form in a mobile. I tried so many ways but not work. Is there any solution? Thanks in advance.
This is what I use to load the image from resource:
Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("drawObj.Graph.png");
Bitmap myPNGImg = new Bitmap(stream);
Then create new bitmap with same size of the images Graph.png:
Bitmap myBlankImg = new Bitmap(48,48);
Graphics mynewGraph = Graphics.FromImage(myNew);
mynewGraph.Clear(Color.Transparent);
Draw the PNG bitmap: mynewGraph.DrawImage(myPNGImg, 0, 0);
And then something I read from internet:(
Rectangle rectDest = new Rectangle(50,50, 100, 100);
ImageAttributes imgatt = new ImageAttributes();
imgatt.SetColorKey(Color.Transparent, Color.Transparent);
myGraph.DrawImage(myNew, rectDest, 0, 0, 99, 99,GraphicsUnit.Pixel, imgatt);
It works, but just clear the four corner of the images(somekind of rounded rectangle). There's still some white border around the images left.
Loading images using Bitmap on Compact Framework will lose alpha information. Setting the color key is an alternative way of doing transparency where you sacrifice an exact single color as the transparent color.
To use alpha blending on Compact Framework, you can use the helper classes from OpenNETCF to load the PNG file, keeping the alpha information (see Transparency and alpha blending), then P/Invoke AlphaBlend. It's not pretty, but it's what it takes. Also be warned that you will take a heavy performance hit for using alpha blending. To bake some images dynamically, it's fine, but for generic on screen drawing operations, you might want to use another approach.
The problem is that in the CF, filling with Color.Transparent actually fills with white (see these two blog entries). Project Resistance has a very good example of how to do this blending (actually several of them).