Three methods to gray Web Images: Gray

Three methods to gray Web Images: Gray

I always like grayscale images because I think they look more artistic. A lot of image editing, such as Photoshop, can easily turn your color image into grayscale. You may even choose to adjust the color depth and tone. Unfortunately, it is not easy to achieve this effect on the network, because there are differences in browsers.

 

1. CSS Filter

Using the CSS Filter attribute may be the easiest way to convert an image into a grayscale image. In the past, Internet Explorer had a proprietary CSS attribute called filtering app custom effects including grayscale.

Currently, filter attributes are part of the CSS3 specification and are supported in some browsers, Firefox, Chrome, and Safari. In the past, we also mentioned the Webkit filter, which not only turns the image gray, but also brown and fuzzy effects.

Add the following CSS style to gray the image

 

img { -webkit-filter: grayscale(1);/* Webkit */ filter:gray;/* IE6-9 */ filter: grayscale(1);/* W3C */ }

　　

Support for IE6-9 and Webkit browsers (Chrome 18 +, Safari 6.0 +, and Opera 15 +)

(Note: This code is ineffective on Firefox .)

2. Javascript

The second method is to use JavaScript technology to support all JavaScript browsers, including IE6 and earlier.

The code is from Ajax Blender.

 

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 SVG Filter. You need to create an SVG file, write the following code in it, and save it as ***. svg

 

<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 attributes, we can connect to the SVG file through the element ID in the SVG file.

 

img { filter:url('img/gray.svg#grayscale'); }

　　

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

 

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 support the grayscale effect across browsers, we can use the above method together with the following code snippet. This code will support Firefox 3.5 +, Opera 15 +, Safari, Chrome, and IE

 

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 method and only provide the CSS Filter as a backup to prevent JavaScript from being disabled. This idea can be easily implemented with the help of Modernizr.

 

.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 amazing effect on your browser !!