CSS Change image grayscale color

I always like grayscale images because I think they look more artistic. Many picture editors like Photoshop can easily turn your color image into grayscale. There is even a choice to adjust the color depth and hue. Unfortunately, such effects are not easy to do on the Web because the browser is different.

1. CSS Filter

Using CSS Filter properties can be the simplest way to turn an image into grayscale. In the past, IE had a proprietary CSS property called filtering application custom effects including grayscale.

Now, filter properties are part of the CSS3 specification and are supported in some browsers, Firefox, Chrome, and Safari. Previously, we also mentioned the WebKit filter, which not only turns the image gray but also turns into a brown and fuzzy effect.

Add the following CSS style to turn the image gray

Copy CodeThe code is as follows:
IMG {
-webkit-filter:grayscale (1);/* WebKit * *
filter:gray;/* ie6-9 */
Filter:grayscale (1); */* *
}

Supports ie6-9 and WebKit browsers (Chrome +, Safari 6.0+, and Opera 15+)

(Note: This code has no effect on Firefox.) )

2. Javascript

The second approach is to use JavaScript technology that should support all JavaScript browsers, including IE6 below

The code comes from Ajax Blender.

Copy CodeThe code is as follows:
Varimgobj = document.getElementById (' js-image ');
Functiongray (imgobj) {
Varcanvas = document.createelement (' canvas ');
Varcanvascontext = Canvas.getcontext (' 2d ');
VARIMGW = Imgobj.width;
VARIMGH = Imgobj.height;
Canvas.width = IMGW;
Canvas.height = IMGH;
Canvascontext.drawimage (imgobj, 0, 0);
Varimgpixels = canvascontext.getimagedata (0, 0, IMGW, IMGH);
for (vary = 0; y < imgpixels.height; y++) {
for (Varx = 0; x < imgpixels.width; × x + +) {
Vari = (Y * 4) * imgpixels.width + x * 4;
Varavg = (Imgpixels.data[i] + imgpixels.data[i + 1] + Imgpixels.data[i + 2])/3;
Imgpixels.data[i] = avg;
Imgpixels.data[i + 1] = avg;
Imgpixels.data[i + 2] = avg;
}
}
Canvascontext.putimagedata (imgpixels, 0, 0, 0, 0, imgpixels.width, imgpixels.height);
Returncanvas.todataurl ();
}
Imgobj.src = Gray (imgobj);

3. SVG

The third method comes from the SVG Filter., you need to create an SVG file and write the following code inside, save named ***.svg

Copy CodeThe code is as follows:
<svgxmlns= "Http://www.w3.org/2000/svg" >
<filterid= "Grayscale" >
<fecolormatrixtype= "Matrix" values= "0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 "/>
</filter>
</svg>
Then using the filter's properties, we can connect the SVG file with the ID of the element in the SVG file
[Code]
IMG {
Filter:url (' Img/gray.svg#grayscale ');
}

You can also put it in a CSS file, for example:

Copy CodeThe code is as follows:
IMG {
Filter:url (' url ' (' data:image/svg+xml;utf8,<svg%20xmlns= ' http://www.w3.org/2000/svg ' ><filter%20id= ' Grayscale ' ><fecolormatrix%20type= ' matrix '%20values= ' 0.3333%200.3333%200.3333%200%200%200.3333%200.3333% 200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200 '/></filter></svg># Grayscale ");
}

Summary

In order to cross-browser support grayscale effect, we can use the above method and together with the following code fragment to achieve. This code will support Firefox 3.5+, Opera 15+, Safari, Chrome, and IE

Copy CodeThe code is as follows:
IMG {
-webkit-filter:grayscale (100%);
-webkit-filter:grayscale (1);
Filter:grayscale (100%);
Filter:url ('.. /img/gray.svg#grayscale ');
Filter:gray;
}

We can use the above code and JavaScript methods and only provide CSS filters as a fallback to prevent JavaScript from being disabled. This idea can be easily implemented with the help of Modernizr.

Copy CodeThe code is as follows:
. no-js img {
-webkit-filter:grayscale (100%);
-webkit-filter:grayscale (1);
Filter:grayscale (100%);
Filter:url ('.. /img/gray.svg#grayscale ');
Filter:gray;
}

OK, you can see the awesome effect on your browser!

CSS Change image grayscale color