Pixel by Pixel Color Conversion WriteableBitmap => PNG Black only for color with transparency

I am working on a silverlight application where all my icons are PNG.

The color of all these icons is black, or rather black to gray, depending on the alpha value. Each PNG has a transparent background.

Inside my application, I want to make the color change in pixels due to black or gray, let's say red (to black) or light red (to gray).

Walking through the bytes of each pixel, I found out that every full black pixel has an alpha value of 255. Those with gray have an alpha value from 1 to 254. An alpha value of 0 seems to be transparent. RGB values ​​are 0 for black.

My idea was that I change the color of each pixel, but keep the alpha value so that PNG retains its original appearance.

To this end, I wrote a small function that looks like this:

private static WriteableBitmap ColorChange(WriteableBitmap wbmi, System.Windows.Media.Color color) { for (int pixel = 0; pixel < wbmi.Pixels.Length; pixel++) { if (wbmi.Pixels[pixel] != 0) { byte[] colorArray = BitConverter.GetBytes(wbmi.Pixels[pixel]); byte blue = colorArray[0]; byte green = colorArray[1]; byte red = colorArray[2]; byte alpha = colorArray[3]; if (alpha > 0) { //HERE, I change the color, but keep the alpha // wbmi.Pixels[pixel] = Gui.Colors.ToInt.Get(color,alpha); colorArray = BitConverter.GetBytes(wbmi.Pixels[pixel]); blue = colorArray[0]; green = colorArray[1]; red = colorArray[2]; alpha = colorArray[3]; String colorString = "blue: " + blue.ToString() + "green: " + green.ToString() + "red: " + red.ToString() + "alpha: " + alpha.ToString(); System.Diagnostics.Debug.WriteLine(colorString); } } } return wbmi; } 

And a little helper class to change the color, but save alpha:

 namespace Gui.Colors { public class ToInt { public static int Get(System.Windows.Media.Color color, Byte alpha) { color.A = alpha; return color.A << 24 | color.R << 16 | color.G << 8 | color.B; } } } 

My problem is that I can clearly see that the problem with pixels with alpha is less than 255 (gray). Although the alpha value is preserved and the color changes, the pixels look different, they are no longer transparent. This makes the edges look scraggy.

Long conversation, short question: Looking at my code - what is the problem? How can I achieve pixel to pixel conversion with transparency of the original PNG?

Sorry for my english. I am not a native speaker of English.

+4
source share
1 answer

This case has been resolved. I found the WriteableBitmapExtensions class written by Rene Schulte.

This extension class offers this feature (and much more ...):

 private const float PreMultiplyFactor = 1 / 255f; public static void SetPixeli(this WriteableBitmap bmp, int index, byte a, Color color) { float ai = a * PreMultiplyFactor; bmp.Pixels[index] = (a << 24) | ((byte)(color.R * ai) << 16) | ((byte)(color.G * ai) << 8) | (byte)(color.B * ai); } 

Now the color change procedure is as follows:

  /// <summary> /// Changes the color of every pixel in a WriteableBitmap with an alpha value > 0 to the desired color. /// </summary> /// <param name="wbmi"></param> /// <param name="color"></param> /// <returns></returns> private static WriteableBitmap ColorChange(WriteableBitmap wbmi, System.Windows.Media.Color color) { for (int pixel = 0; pixel < wbmi.Pixels.Length; pixel++) { byte[] colorArray = BitConverter.GetBytes(wbmi.Pixels[pixel]); byte blue = colorArray[0]; byte green = colorArray[1]; byte red = colorArray[2]; byte alpha = colorArray[3]; if (alpha > 0) { wbmi.SetPixeli(pixel, alpha, color); } } wbmi.Invalidate(); return wbmi; } 

You can download Rene Schulte's work here:

http://dotnet.dzone.com/sites/all/files/WriteableBitmapExtensions.zip

The whole project can be found here:

http://writeablebitmapex.codeplex.com/

Since no one answered this question here on SO, a big gun greets Rene Schulte. YMMD! :)

By the way: I use SVG NounProject , convert them to PNG in the desired size, and then I use these methods to color them. Since all characters in NounProject are black, this is a good way to get high quality characters.

+6
source

Source: https://habr.com/ru/post/1479218/


All Articles