Change UIImage colors with Xamarin - xamarin

Question

I'm using Xamarin Forms and I have a UIImage (in a custom renderer) that I load from a file and that I use as a pattern.
The image is a 4x16 pixels with two 4x4 pixels black areas and a 4x8 transparent area:
I need to change the color of the black areas dinamically.
This is what I tried, without any success:
UIImage image = UIImage.FromFile("line_pattern.png");
image = image.ApplyTintColor(UIColor.Orange,UIImageRenderingMode.AlwaysTemplate);
The image is loaded correctly, but the color doesn't change. How can I do it?

Answer 1

Have a try to set the tintColor to imageView:
UIImageView imageView = new UIImageView();
UIImage image = UIImage.FromFile("line_pattern.png");
image = image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
image = image.ApplyTintColor(UIColor.Orange, UIImageRenderingMode.AlwaysTemplate);
imageView.Image = image;
imageView.TintColor = UIColor.Orange;

Answer 2

Setting the tint color works for PNGs with a single color.
However, we wanted to be able to change individual colors in UIImage objects loaded from JPGs or PNGs which may have more than one color. Our target images are icons or similar images that have a relatively limited number of distinct colors, and swapping one color for another seems like it should be simple, but none of the solutions we found online provided exactly what we were looking for.
So, to replace a color we created the following filter class derived from CIColorCube. We use this with images that have a relatively limited number of colors, but nothing prevents this from being used with more complex images. If you don't get the results you want, play with the CubeDimension and IndexPlusMinus properties to see how they affect the image.
This code is loosely based on the Apple Developer Chroma Key Filter Recipe example. The logic used there for setting the color map may be more appropriate for complex images like photos.
Finally, for anyone updating from Xamarin to MAUI, this code works on MAUI by simply changing the one nfloat reference to NFloat.
UPDATE: The sushihangover/ColorReplaceFilter.cs can also be used to replace colors. In fact, we had originally tried using the sushihangover code but had problems, so we created the color cube filter. Ultimately the problems we had with the sushihangover filter were our own doing; it works just fine once we figured that out. The performance of both the color cube filter and the sushihangover filter seem to be about the same, so either filter will do the job.
public class iOSReplaceColorFilter : CIColorCube
{
/// <summary>
/// The color to replace with NewColor. If not set, the color of all non-transparent
/// pixels in the image will be changed to NewColor.
/// </summary>
public CIColor OldColor { get; set; }
/// <summary>
/// The new color used to replace the old color.
/// </summary>
public CIColor NewColor { get; set; }
/// <summary>
/// An offset that is applied when calculating which color cube index values match
/// the old color. Set this to 1 to avoid interpolation of the new color when the
/// RGB color indices of the old color do not exactly resolve to integer values.
/// </summary>
public int IndexPlusMinus { get; set; } = 1;
/// <summary>
/// Default constructor. To use this, you must explictly set OldColor, NewColor, and
/// the CubeDimension, then call InitCube before getting the OutputImage.
/// </summary>
public iOSReplaceColorFilter()
{
}
/// <summary>
/// Create a replacement filter that uses the specified cube dimension for the color
/// cube map. The default dimension is 16, but cube dimensions as small as 2 can be
/// used. When replacing a color in an image with 2 or more distinct colors, the cube
/// dimension determines how close two colors' RGB values can be without introducing
/// interpolation effects.
/// </summary>
public iOSReplaceColorFilter(CIColor oldColor, CIColor newColor, int cubeDimension = 16)
{
OldColor = oldColor;
NewColor = newColor;
CubeDimension = cubeDimension;
InitCube();
}
/// <summary>
/// Create a replacement filter for replacing all non-transparent pixels in the image
/// with the specified color.
/// </summary>
public iOSReplaceColorFilter(CIColor newColor)
{
NewColor = newColor;
CubeDimension = 2;
InitCube();
}
/// <summary>
/// Build the color cube. This must be called before using OutputImage to get
/// the converted image.
/// </summary>
public virtual iOSReplaceColorFilter InitCube()
{
var dim = (int)CubeDimension;
var dimFactor = (float)(dim - 1);
var rangeChecker = new IndexRangeChecker(OldColor, dimFactor, IndexPlusMinus);
var offset = 0;
var cubeData = new float[dim * dim * dim * 4];
for (var b = 0; b < dim; ++b)
{
var blue = b / dimFactor;
for (var g = 0; g < dim; ++g)
{
var green = g / dimFactor;
for (var r = 0; r < dim; ++r)
{
var red = r / dimFactor;
if (NewColor != null && rangeChecker.Matches(r, g, b))
{
cubeData[offset++] = (float)NewColor.Red;
cubeData[offset++] = (float)NewColor.Green;
cubeData[offset++] = (float)NewColor.Blue;
}
else
{
cubeData[offset++] = red;
cubeData[offset++] = green;
cubeData[offset++] = blue;
}
cubeData[offset++] = 1.0f;
}
}
}
var byteArray = new byte[cubeData.Length * 4];
Buffer.BlockCopy(cubeData, 0, byteArray, 0, byteArray.Length);
var data = NSData.FromArray(byteArray);
CubeData = data;
return this;
}
/// <summary>
/// Checks to see if an r,g,b index set falls within the range of cube indices
/// that should be considered a "hit" on the target color. If the checker is
/// created with a null color, then all indices match.
/// </summary>
private class IndexRangeChecker
{
private IndexRange rRange;
private IndexRange gRange;
private IndexRange bRange;
public IndexRangeChecker(CIColor color, float dimFactor, int indexPlusMinus)
{
if (color != null)
{
rRange = new IndexRange(color.Red, dimFactor, indexPlusMinus);
gRange = new IndexRange(color.Green, dimFactor, indexPlusMinus);
bRange = new IndexRange(color.Blue, dimFactor, indexPlusMinus);
}
}
public bool Matches(int r, int g, int b)
{
if (rRange != null)
return rRange.Matches(r) && gRange.Matches(g) && bRange.Matches(b);
else
return true;
}
private class IndexRange
{
private int start;
private int end;
public IndexRange(nfloat colorValue, float dimFactor, int offset)
{
var indx = (int)Math.Round(dimFactor * colorValue);
start = indx - offset;
end = indx + offset;
}
public bool Matches(int indx) => start <= indx && indx <= end;
}
}
/// <summary>
/// Convenience function that creates and applies a iOSReplaceColorFilter to
/// an image and returns the resulting image.
/// </summary>
public static UIImage ReplaceColor(UIImage inputImage, CIColor oldColor, CIColor newColor)
{
var filter = new iOSReplaceColorFilter(oldColor, newColor);
filter.InputImage = new CIImage(inputImage);
var outputImage = iOSColorCubeUtil.RenderFilteredImage(filter.OutputImage, inputImage);
return outputImage;
}
}
public class iOSColorCubeUtil
{
/// <summary>
/// Render an image after all filters have been applied. If you have more than one
/// filter, the output of each should be passed to the next filter, and only the final
/// filter result should be passed to this function.
///
/// For example, to apply a sepia tone filter and then an invert filter, do this:
///
/// var sepiaFilter = new CISepiaTone { Intensity = 0.8f, InputImage = myImage };
/// var invertFilter = new CIColorInvert { InputImage = sepiaFilter.OutputImage };
/// var finalImage = RenderFilteredImage(invertFilter.OutputImage);
///
/// The originalImage is needed as a argument in order to render the image using the
/// same scale factor and orientation as the original image.
/// </summary>
public static UIImage RenderFilteredImage(CIImage filteredImage, UIImage originalImage)
{
// The ColorSpace MUST be set in order for the CIColorCube mapping to work. If
// the color space isn't set, CIColorCube-based color swapping only worked for
// target colors whose RGB color values were all either 0x00 or 0xFF (e.g. #000000,
// #FFFFFF, #FF0000, #FF00FF, etc.)
var rgbColorSpace = CGColorSpace.CreateDeviceRGB();
var options = new CIContextOptions
{
WorkingColorSpace = rgbColorSpace,
OutputColorSpace = rgbColorSpace
};
var context = CIContext.FromOptions(options);
var cgImage = context.CreateCGImage(filteredImage, filteredImage.Extent);
var fixedImage = UIImage.FromImage(cgImage, originalImage.CurrentScale, originalImage.Orientation);
return fixedImage;
}
}