Color Grayscale Image Converter with JavaScript

How to convert image to grayscale? A very easy, use a grayscale Photoshop filter, this solution gives a very good result. But if you want to convert grayscale image on the web-based applications, how should we do? It's still a filter, because Adobe has released an online tool for editing pictures, or some other image editors.

But this is not a topic jsB@nk.com want to discuss. jsB@nk.com's talking about a color grayscale image converter with JavaScript, a free simple JavaScript example code to convert grayscale on your web pages directly.

Check out this free JavaScript example code to learn how to desaturate an image (convert color images to grayscale) using JavaScript.

Sampled by © JavaScriptBank.com

Click the button below the image to desaturate it.

Original image:

Image which will be desaturated:

Documentation

The technique on this image manipulation is prety simple, as you probably know, screen color consists of 3 components: red, green and blue. Each component or color has a value from 0 to 255. The value 0 indicates there is no red color and the value 255 would be the brightest possible red color. To convert a color to grayscale you just need to calculate the average for all three components. This can be done using the simple formula below:

grayscalecolor = (red + green + blue) / 3;

The formula above then implemented to canvas , first time we need to create a canvas, loaded the image into it, and then changed the color values of each pixel in the image to an average value. After that we simply replaced the SRC of our image to the image changed in the canvas.