Using InputBaseN() To Encode HEX Colors Into An INT In ColdFusion

As I’m digging into the Zxing barcode library in ColdFusion, one of the options that I have it set the On/Off colors for the pixels within the rendered image. Each of these colors is represented as a single integer in which the Alpha, Red, Green, and Blue channels of the color are encoded into the four bytes of the 32-bit integer, respectively. ColdFusion makes this an easy task with its inputBaseN() function, which allows us to effortlessly convert numbers between different radix.

To explore this technique, let’s use Java’s java.awt.Color class. This class can be instantiated using various constructor signatures. And for this exploration, we’ll use these two:

• Color( int r, int g, int b, int a )
• Color( int rgba, boolean hasalpha )

The first constructor call will act as our control. Since we’re passing-in the individual channels, we know that we won’t have to worry about bit-mechanics. Then, the second constructor call will act as our test, to see if we can generate the same colors using a single integer (in which each byte represents a different channel).

Here’s the ColdFusion code that makes both calls and then compares the output:

	hexColor = "ff3366aa"; // {R,G,B,A}
	red =   hexColor.mid( 1, 2 );
	green = hexColor.mid( 3, 2 );
	blue =  hexColor.mid( 5, 2 );
	alpha = hexColor.mid( 7, 2 );

	// Creating colors using individual RGBA channels.
	colorFromChannels = createObject( "java", "java.awt.Color" ).init(
		inputBaseN( red,   16 ),
		inputBaseN( green, 16 ),
		inputBaseN( blue,  16 ),
		inputBaseN( alpha, 16 )
	);

	// Creating colors with a single INT in which each of the four bytes (within the INT)
	// represents Alpha, Red, Green, and Blue, respectively. Notice that we have to switch
	// where the Alpha byte is located: in the original Hex string it was at the end
	// (which is what we use on the web); but, the INT-input needs it to be at the start.
	colorFromInt = createObject( "java", "java.awt.Color" ).init(
		inputBaseN( "#alpha##red##green##blue#", 16 ),
		true // Has alpha.
	);

	dump(
		label = "From Channels",
		var = [
			colorFromChannels.getRed(),
			colorFromChannels.getGreen(),
			colorFromChannels.getBlue(),
			colorFromChannels.getAlpha()
		]
	);
	dump(
		label = "From HEX Int",
		var = [
			colorFromInt.getRed(),
			colorFromInt.getGreen(),
			colorFromInt.getBlue(),
			colorFromInt.getAlpha()
		]
	);

One caveat here is that I defined the original input hex as ff3366aa, in which the alpha – aa – is at the end of the string. This is how colors work on the web. However, when representing the color as an INT (in this context), the alpha channel needs to be on the other end (aaff3366). This is why I’m using string concatenation when defining the colorFromInt variable.

And, when we run this ColdFusion code, we get the following output:

As you can see, the RGBA channels extracted from the Color instances are exactly the same. We were able to properly represent the RGBA color as an INT in which each byte represented a different color.

I’ll demonstrate this in a follow-up post on QR Codes; but, in the Zxing library, which technique allows me to easily create those On/Off colors:

	imageConfig = fromJars( "com.google.zxing.client.j2se.MatrixToImageConfig" )
		.init(
			inputBaseN( "ff0000CD", 16 ), // On color ARGB.
			inputBaseN( "ffffffff", 16 )  // Off color ARGB.
		)
	;

ColdFusion is so freaking sweet!

Want to use code from this post?
Check out the license.

https://bennadel.com/4807