Three methods to gray Web Images: Gray

Source: Internet
Author: User

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 !!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.