  # How to convert an image to grayscale using PHP    ## Category: Programming/PHP

Although converting an image (usually in true color) to grayscale can sound like a simple operation if you are used to image processing software, PHP doesn't have a function for this conversion by default.

### Grayscale images

A grayscale image contains only various levels of gray in the image, which can be expressed mathematically by the red, green and blue values (expressed as RGB) all equal. Still, true color images can have any value for r, g and b, so in order to convert this to a grayscale value a transformation is needed.

### RGB and HSV

HSV stands for Hue, Saturation and Value. In order to represent an image in grayscale, all we need is to use the Value, with no Hue or Saturation. There are conversion equations from one to each other, so all we need to do is use them.

H = pow(cos( ( (1/2)*( (r-g)+(r-b) ) / ( sqrt( (r-g)*(r-g) + (r-b)*(g-b) ) ) ), -1);

S = 1 - (3 / (r+g+b))*min(r,g,b) );

V = (1/3) * (r + g + b);
The first two may seem quite complicated, but all we need is the third, which is simply the average.

Now, since we need to represent the image again in grayscale, we'll just use the calculated Value for all three r, g and b.
<?php
\$source_file = "test_image.jpg";

\$im = ImageCreateFromJpeg(\$source_file);

\$imgw = imagesx(\$im);
\$imgh = imagesy(\$im);

for (\$i=0; \$i<\$imgw; \$i++)
{
for (\$j=0; \$j<\$imgh; \$j++)
{

// get the rgb value for current pixel

\$rgb = ImageColorAt(\$im, \$i, \$j);

// extract each value for r, g, b

\$rr = (\$rgb >> 16) & 0xFF;
\$gg = (\$rgb >> 8) & 0xFF;
\$bb = \$rgb & 0xFF;

// get the Value from the RGB value

\$g = round((\$rr + \$gg + \$bb) / 3);

// grayscale values have r=g=b=g

\$val = imagecolorallocate(\$im, \$g, \$g, \$g);

// set the gray value

imagesetpixel (\$im, \$i, \$j, \$val);
}
}

header('Content-type: image/jpeg');
imagejpeg(\$im);
?>
If you are not familiar with the r,g and b values from RGB aggregated value, you should read this article:

- How to check if an image is grayscale in PHP

Posted by: Indy on October 30, 2006 at 07:51.   # » Comments

it is better to use imagefilter functin
there is a function called imagefilter in php that convert image to gray scale, smiply like this
imagefilter(\$im, IMG_FILTER_GRAYSCALE);

Posted by Habes on July 3, 2007 at 09:56 AM.

Only in PHP 5
The imagefilter function is only available in PHP5, so for older versions you still need to use a custom function.

Posted by Indy on July 4, 2007 at 07:13 AM.

More Sophisticated Ways To Convert Color to Gray
While it is easy and fast to simply average together the red, green and blue channels to obtain a single luminance channel, more sophisticated procedures are available, such as using Y from the YIQ color space. See, for instance:

http://www.cs.rit.edu/~ncs/color/t_convert.html#RGB%20to%20YIQ%20&%20YIQ%20to%20RGB

http://www.poynton.com/PDFs/ColorFAQ.pdf

http://www.nationmaster.com/encyclopedia/YIQ

Posted by Will Dwinnell on December 18, 2007 at 01:06 PM.

HSV Value definition
I'm sorry, but in the HSV color space the value is defined differently as a full red RGB(255,0,0) would have a value of 1 or 100% respectively. So would any other color with a 255 value in it. Your equation creates an average instead which is imo not the correct conversion function.

Instead it should be the maximum of (r,g,b).

Cu!

Posted by Holger Göbber on July 18, 2008 at 06:24 PM.

lolwut
To Holger;

Using the average is correct, let me try to explain:

if there's a red pixel - 255,0,0 - its about a third of white, if you know what i mean. White is the brightest color, but only 1/3th of that is used, because the green and blue are 0.

When we use average, we basically divide 255 by 3, which is 85.
3 * 85 (r,g,b all have 85) is 255 again, so it's as bright as it used to be.

--

If we use your method, simply use the highest value of the three colors, see what would happen:

If we had a purple pixel - 255,0,255) it would come out as 255,255,255, which is white. If there was also a red pixel, it would also come out as white. If any color contains 255, it would be white.

Furthermore, if you need prove, try both. You'll see your method produces faulty images.

--

Hope this explanation was somewhat clear, as i fail terribly at explaining =P

-Ziao

Posted by Ziao on March 22, 2009 at 04:54 PM.

@Ziao
Hi Ziao,

I was working on a small graphic composition script in PHP when I came across your script. My main point is that the definition of HSV is differently from what you need for your grayscaling.

In computer graphics the behaviour of HSV colors is precisely that: pure red equals to a saturation of 100% and a value of 100%, not to an average of white.

At least in any graphics program I have come across so far...

I think I needed a slightly different thing for my script because it was a kind of simple alphamasking where I combined images based on grayscale values so I don't know how I adapted it.

So my point is not about a bug in the script but merely a nitpick about wording. Pure HSV <> RGB conversion would usually work a little different.

Posted by Holger Göbber on April 3, 2009 at 12:26 PM.

This is what I came up with...
http://www.hm2k.com/posts/how-to-convert-an-image-to-greyscale-using-php

Posted by HM2K on December 14, 2009 at 12:29 PM.

great job!
great job!

Posted by Shizi on February 5, 2010 at 11:12 AM.

New, very easy to use script
You can use the script that makes the selected photos grayscale and in the case of mouseover the colors are restored. It is easy to use, just put "grayscale" as the classes of the images. It used PHP and JavaScript for developing the script.

Script homepage: http://rubensargsyan.com/grayscale/

Posted by Ruben Sargsyan on March 24, 2010 at 08:13 AM.

Good article !
Thanks for this explaination. With so much frameworks and libraries, we forget to understand how functions we are using work.

Posted by Ninsuo on December 14, 2010 at 12:02 AM.

Its working like charm. This is what I expected
Its working like charm. This is what I expected

Posted by Navaneeth on June 13, 2013 at 11:19 AM.

Now turn the greyscale to something blue
i tried this example which worked like a spark converting from color to grayscale, now i want to convert the graysale to something blue, or perhaps i could turn it to bluescale in the first place. i wonder which parameters i would need to change to get the blue scale.

Posted by J.P. Wilbrand on January 5, 2014 at 02:52 PM.

## Feeds ## Articles

© Copyright 2006-2020 Bubble. All rights reserved. Sitemap - Contact