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

This article mainly introduces "what are the methods of making website pictures generate gray effect". In daily operation, I believe that many people have doubts about the method of making website pictures generate gray effect. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for everyone to answer the question of "what is the method of making website pictures generate gray effect?" Next, please follow the editor to study!

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 is as follows:

Var imgObj = document.getElementById ('js-image')

Function gray (imgObj) {

Var canvas = document.createElement ('canvas')

Var canvasContext = canvas.getContext ('2d')

Var imgW = imgObj.width

Var imgH = imgObj.height

Canvas.width = imgW

Canvas.height = imgH

CanvasContext.drawImage (imgObj, 0,0)

Var imgPixels = canvasContext.getImageData (0,0, imgW, imgH)

For (var y = 0; y < imgPixels.height; yearly +) {

For (var x = 0; x < imgPixels.width; x +) {

Var I = (y * 4) * imgPixels.width + x * 4

Var avg = (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)

Return canvas.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

The code is as follows:

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!

At this point, the study on "what are the methods of making website pictures produce gray effect" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.