i am working on some avatar creation related stuff in which i create the avatar using the parts of images. So until now every thing was fine. But suddenly new requirement came for to change the color of image ie suppose change the color of hair .
So after research means googling 😉 i found that this process is knowing as changing the hue of image.
Definition of HUE :
Not knowing right now
but changing the hue means working on rgb model and changing the color pixel by pixel with certain angle(as per user wish).
so in rgb each part red, green and blue are having value in 8 bits so in total we are having 3 bytes which we store in 4 bytes of int.
Blue : 0-7
Green : 8-15
Red : 16-23
so if we want to extract the color as per our requirement from rgb we have to mask those values. I think this extract will give proper information
“1 down vote accepted
In RGB you have 8 bits for Red, 8 bits for Green and 8 bits for Blue. You are storing the 3 bytes in an int, which has 4 bytes in this way:
Bits from 0-7(least significant) for Blue.
Bits from 8-15(least significant) for Green.
Bits from 16-23(least significant) for Red.
To extract them to separate values you need to right shift the correct number of bits in order to put the byte corresponding to the color you want to extract in the least significant byte of the int, and then put the rest of the int in 0 so as to let that byte value only. The last part is done by using the AND operation with mask 0xFF. The AND leaves the only byte of the int where it is applied with the same value, leaving the rest bytes in 0.
This is what happens:
var color:uint = myObject.color;
You have the color variable like this: 0x00RRGGBB
var red:uint = color >>> 16;
Right-shifting 16 bits color results in: 0x000000RR, resulting in the red value.
But for:
var green:uint = color >>> 8 & 0xFF;
After right-shifting color 8 bits it leaves this result 0x0000RRGG, but here we only need the GG bits left so we apply the AND operation with the mask 0xFF or to be more clear 0x000000FF, as you show know AND leaves the old bits values where the mask is 1 and zeros there the mask is 0, so the result of doing 0x0000RRGG & 0x000000FF = 0x000000GG which is the value for green. The same is applied to extract the blue value.
”
So we can implement using php.. as there are no inbuilt functions of php to change hue of the image.
http://stackoverflow.com/questions/1890409/change-hue-of-an-image-with-php-gd-library
here are the steps to change the image’s hue:Â Â Â Traverse the image pixel by pixel
- Â Â Â Get the RGB color at pixel using imagecolorat()
- Â Â Â Transform the RGB value into a HSL value
- Â Â Â Change the hue value, leave saturation and lightness alone (Hue is a value from 0 to 360)
- Â Â Â Transform the new HSL value back to RGB
- Â Â Â Change the color at current pixel
Code for it :
function imagehue(&$image, $angle) {
if($angle % 360 == 0) return;
$width = imagesx($image);
$height = imagesy($image);
for($x = 0; $x < $width; $x++) {
for($y = 0; $y < $height; $y++) {
$rgb = imagecolorat($image, $x, $y);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
$alpha = ($rgb & 0x7F000000) >> 24;
list($h, $s, $l) = rgb2hsl($r, $g, $b);
$h += $angle / 360;
if($h > 1) $h–;
list($r, $g, $b) = hsl2rgb($h, $s, $l);
imagesetpixel($image, $x, $y, imagecolorallocatealpha($image, $r, $g, $b, $alpha));
}
}
}
for changing the color space : refereed http://www.actionscript.org/forums/showthread.php3?t=50746
function RGB_TO_HSV ($R, $G, $B)Â // RGB Values:Number 0-255
{Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â // HSV Results:Number 0-1
$HSL = array();
$var_R = ($R / 255);
$var_G = ($G / 255);
$var_B = ($B / 255);
$var_Min = min($var_R, $var_G, $var_B);
$var_Max = max($var_R, $var_G, $var_B);
$del_Max = $var_Max – $var_Min;
$V = $var_Max;
if ($del_Max == 0)
{
$H = 0;
$S = 0;
}
else
{
$S = $del_Max / $var_Max;
$del_R = ( ( ( $max – $var_R ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;
$del_G = ( ( ( $max – $var_G ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;
$del_B = ( ( ( $max – $var_B ) / 6 ) + ( $del_Max / 2 ) ) / $del_Max;
if     ($var_R == $var_Max) $H = $del_B – $del_G;
else if ($var_G == $var_Max) $H = ( 1 / 3 ) + $del_R – $del_B;
else if ($var_B == $var_Max) $H = ( 2 / 3 ) + $del_G – $del_R;
if (H<0) $H++;
if (H>1) $H–;
}
$HSL[‘H’] = $H;
$HSL[‘S’] = $S;
$HSL[‘V’] = $V;
return $HSL;
}
function HSV_TO_RGB ($H, $S, $V)Â // HSV Values:Number 0-1
{Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â // RGB Results:Number 0-255
$RGB = array();
if($S == 0)
{
$R = $G = $B = $V * 255;
}
else
{
$var_H = $H * 6;
$var_i = floor( $var_H );
$var_1 = $V * ( 1 – $S );
$var_2 = $V * ( 1 – $S * ( $var_H – $var_i ) );
$var_3 = $V * ( 1 – $S * (1 – ( $var_H – $var_i ) ) );
if      ($var_i == 0) { $var_R = $V    ; $var_G = $var_3 ; $var_B = $var_1 ; }
else if ($var_i == 1) { $var_R = $var_2 ; $var_G = $V     ; $var_B = $var_1 ; }
else if ($var_i == 2) { $var_R = $var_1 ; $var_G = $V     ; $var_B = $var_3 ; }
else if ($var_i == 3) { $var_R = $var_1 ; $var_G = $var_2 ; $var_B = $V    ; }
else if ($var_i == 4) { $var_R = $var_3 ; $var_G = $var_1 ; $var_B = $V    ; }
else                  { $var_R = $V    ; $var_G = $var_1 ; $var_B = $var_2 ; }
$R = $var_R * 255;
$G = $var_G * 255;
$B = $var_B * 255;
}
$RGB[‘R’] = $R;
$RGB[‘G’] = $G;
$RGB[‘B’] = $B;
return $RGB;
}
Collection of Experiences ......... 