Shulou(Shulou.com)06/03 Report--

What are the three methods of turning web web images into gray and color images into grayscale? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

I always like grayscale images because I think they look more artistic. Many image editors such as Photoshop can easily turn your color image into grayscale. There is even a choice to adjust the color depth and tone. Unfortunately, this effect is not easy to do on the web because browsers are different.

1 、 CSS Filter

Using the CSS filter attribute is probably the easiest way to turn an image into grayscale. In the past, IE browsers had a proprietary CSS attribute called filtering to apply custom effects including grayscale.

Filter properties are now part of the CSS3 specification and are supported in some browsers, Firefox, Chrome, and Safari. Previously, we also mentioned the Webkit filter, which turns images not only gray but also brown and blurred.

Add the following CSS style to turn the image gray

The code is as follows:

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 has no effect on Firefox.)

2 、 Javascript

The second way is by using JavaScript, which should technically support all JavaScript browsers, including the following IE6

The code comes from Ajax Blender.

The 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; yearly +) {

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 a SVG file, write the following code in it, and save it and name it * *. Svg

The code is as follows:

Then using the attributes of the filter, we can connect to the SVG file through the ID of the elements in the SVG file

[code]

Img {

Filter:url ('img/gray.svg#grayscale')

}

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

The code is as follows:

Img {

Filter:url ('url ("data:image/svg+xml;utf8,#grayscale");')

}

Summary

In order to support grayscale across browsers, we can use the above method and the following code snippet to implement it. This code will support Firefox 3.5, Opera 15, Safari, Chrome, and IE

The code is as follows:

Img {

-webkit-filter: grayscale

-webkit-filter: grayscale (1)

Filter: grayscale (100%)

Filter:url ('.. / img/gray.svg#grayscale')

Filter:gray

}

We can take advantage of the above code and JavaScript method and provide only the CSS filter as a backup in case JavaScript is disabled. This idea can be easily realized with the help of Modernizr.

The code is as follows:

. no-js img {

-webkit-filter: grayscale

-webkit-filter: grayscale (1)

Filter: grayscale (100%)

Filter:url ('.. / img/gray.svg#grayscale')

Filter:gray

}

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

This is the answer to the question about how to turn web web images into gray and color images into grayscale. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.