Is RGBA color calculation (normalization) possible to solve it in the .NET wrapper or a general solution is needed

[shanji97]

A few weeks ago we upgraded from Q8 to Q13-HDRI due to specific requirements. After a few days we noticed a (very obvious) bug (because it is on the front page of our application). Upon inspecting the CSS, the bug was also very obvious.

The numbers were just too high. The code we used to calculate these numbers for this, was:

MagickColor color = new MagickColor(backgroundColor);
return $"rgba({color.R}, {color.G}, {color.B}, {backgroundOpacity}) !important;";

which was quickly resolved with

var color = new MagickColor(backgroundColor);
var colorOutput = color.ToString();
return $"rgba({NormalizeColorComponentTo8Bit(colorOutput, 1)}, {NormalizeColorComponentTo8Bit(colorOutput, 5)}, {NormalizeColorComponentTo8Bit(colorOutput, 9)}, {backgroundOpacity}) !important

and

  /// <summary>
  /// Normalizes the color from the Image Magick Q16HDRI library to 8 bit color.
  /// </summary>
  /// <param name="colorOutput">The hex string of the color interpreted by teh Image Magick Q16HDRI library.</param>
  /// <param name="startIndex">The index at which the color component part in the <paramref name="colorOutput"/> starts.</param>
  /// <param name="numberOfCharacters">Determines the length of the color component. Default the library uses a lenght of 4.</param>
  /// <returns>An interger value of the color component.</returns>
  private int NormalizeColorComponentTo8Bit(string colorOutput, int startIndex, int numberOfCharacters = 4)
  {
    var colorHigh = int.Parse(colorOutput.Substring(startIndex, numberOfCharacters), System.Globalization.NumberStyles.HexNumber);
    return (int)Math.Round(colorHigh / 65535.0 * 255);
  }

I'm just curious if this is something that the Image Magick (wrapper) already does, or at least can be implemented (on the wrapper level)? I don't personally mind some precision loss.

[dlemstra]

I think you could use color.ToHexString() instead?

p.s. Your code won't work when the color value is below 100.

[shanji97]

I tried to color.ToHexString(), but if I recall correctly, I got a really long hex string with way to much characters. I'll try it out later.
What do you mean by below 100?
Currently a "testing" color is:

and it works. The original HEX value, defined in out settings, is #0098D0.

[dlemstra]

My bad I was looking at the CMYK implementation and that does not guarantee the correct offsets. The .ToHexString() method will only give you two extra characters when the alpha channel is not opaque. With an alpha channel that is 50% you will get #0098D080, otherwise you will get #0098D0`. And this seems to be supported by the modern browsers now.

[shanji97]

Edit: 2.8.2024 @ 10:32:
Turns out the gamma was the problem. I'll post the final code as soon as I do the changes, commit and test it.

 public static MagickColor ConvertQ8toQ16HDRI(byte red, byte green, byte blue, byte alpha = 0, float gamma = 2.2f)
 {
   return new MagickColor(ComputeQ16HDRIColor(red, gamma), ComputeQ16HDRIColor(green, gamma), ComputeQ16HDRIColor(blue, gamma), ComputeQ16HDRIColor(alpha,0,true));
 }

 public static float ComputeQ16HDRIColor(byte colorComponent, float gamma, bool isAlpha = false) 
 {
   if (isAlpha)
     return (colorComponent / 100.0f) * 65535;
   return colorComponent / 255.0f * 65535;
 }

I had to reopen my bug, since the problem was not solved everywhere we use the MagickColor object.
I probably do not understand this math but the current setup is the following:
The color is retrieved from database settings (here hardcoded):

 var backgroundColor = new MagickColor(
    235,
    241,
    243); //Alpha is 1.0f or 255 or 65535. 

Which is rgba(235, 241, 243, 1) or #ebf1f3 in hex. When I hover over in the inspector on the background object the HEX value is {#00ED00F100F3FFFF} , however when I call the backgroundColor.ToHexString() method I get "#010101".
I tried to write my own conversion, just as I successfully did with the previous string, but no luck. The result is always a black image:

The code I am using to calculate the color is the following:

var backgroundColor = MultimediaHelper.ConvertQ8toQ16HDRI(
  235,
  241,
  243,
  100); //Alpha is 1.0f or 255 or 65535.  I guess it's 65535.

and the two methods in the helper class.

/// <summary>
/// Converts the color from the Image magick Q8 format to the Q16HDRI format.
/// </summary>
/// <param name="red">Red color component.</param>
/// <param name="green">Green color component.</param>
/// <param name="blue">Blue color component.</param>
/// <param name="alpha">Alpha component.</param>
/// <param name="gamma">Gamma value.</param>
/// <returns>A new <see cref="MagickColor"/> object with the apropriate conversion from the standard RGBA notation supported in Image magick Q8 version, to the Q16HDRI conversion.</returns>
public static MagickColor ConvertQ8toQ16HDRI(byte red, byte green, byte blue, float alpha = 0, float gamma = 2.2f)
{
  return new MagickColor(ComputeQ16HDRIColor(red, gamma), ComputeQ16HDRIColor(green, gamma), ComputeQ16HDRIColor(blue, gamma), alpha / 100.0f);
}

/// <summary>
/// Computes the actuall floating point color component.
/// </summary>
/// <param name="colorComponent"></param>
/// <param name="gamma"></param>
/// <returns></returns>
public static float ComputeQ16HDRIColor(byte colorComponent, float gamma) =>
  (float)Math.Pow((colorComponent / 255.0f) * 65535, 1.0 / gamma);

Also I don't know what to plug in when I have custom alpha.
Honestly I don't have any clue in what direction to go since I worked only with 8 bit RGBA colors while programming and actually never thought much about it.

[shanji97]

Currently I see no issue with following three methods on Q16HDRI which prompts me to maybe include them in some sort of next version of the image magick wrapper.

  /// <summary>
  /// Converts the color from the Image magick Q8 format to the Q16HDRI format.
  /// </summary>
  /// <param name="red">Red color component.</param>
  /// <param name="green">Green color component.</param>
  /// <param name="blue">Blue color component.</param>
  /// <param name="alpha">Alpha component.</param>
  /// <param name="gamma">Gamma value.</param>
  /// <returns>A new <see cref="MagickColor"/> object with the appropriate conversion from the standard RGBA notation supported in Image magick Q8 version, 
  /// to the Q16HDRI conversion.</returns>
  public static MagickColor ConvertQ8toQ16HDRI(byte red, byte green, byte blue, byte alpha = 0) => 
    new MagickColor(ComputeQ16HDRIColor(red), ComputeQ16HDRIColor(green), ComputeQ16HDRIColor(blue), ComputeQ16HDRIColor(alpha, true));

  /// <summary>
  /// Converts the color component from the Image magick Q8 format to the Q16HDRI format.
  /// </summary>
  /// <param name="colorComponent">The color component to be converted.</param>
  /// <param name="isAlpha">If true, we compute the alpha component which has a range of [0,100].</param>
  /// <returns>A Q16HDRI representation of the color component.</returns>
  public static float ComputeQ16HDRIColor(byte colorComponent, bool isAlpha = false) =>
    (isAlpha ? colorComponent / 100.0f : colorComponent / 255.0f) * 65535;

  /// <summary>
  /// Normalizes the color from the Image Magick Q16HDRI library to 8 bit color.
  /// </summary>
  /// <param name="colorOutput">The hex string of the color interpreted by teh Image Magick Q16HDRI library.</param>
  /// <param name="startIndex">The index at which the color component part in the <paramref name="colorOutput"/> starts.</param>
  /// <param name="numberOfCharacters">Determines the length of the color component. Default the library uses a lenght of 4.</param>
  /// <returns>An integer value of the color component.</returns>
  public static int NormalizeColorComponentTo8Bit(string colorOutput, int startIndex, int numberOfCharacters = 4)
  {
    var colorHigh = int.Parse(colorOutput.Substring(startIndex, numberOfCharacters), System.Globalization.NumberStyles.HexNumber);
    return (int)Math.Round(colorHigh / 65535.0 * 255);
  }

[dlemstra]

I don't think that I want to add this. I would advise you to create your own extension method.

[shanji97]

Yeah, maybe I see why. It's feels kinda odd having clients, that use the color range 0-255, but need to support HEIC/HEIF so that they would like to have no problems with iPhone users.

[dlemstra]

This feel very specific for your situation. What you could do is change your bytes to a hex array and the call the constructor of MagickColor that accepts '#FFEACBD1.

[shanji97]

Oh, now I actually get it. Maybe I just reopen it myself, since division is anyway expensive.