Three ways to create a gray effect on website images

Three ways to create a gray effect on website images
I’ve always preferred grayscale images because I think they look more artistic. Many image editors like Photoshop can easily convert your color images to grayscale. There are even options to adjust color depth and hue. Unfortunately, this effect is not easy to achieve on the web due to differences in browsers.
1. CSS Filter
Using the CSS filter property is probably the easiest way to convert an image to grayscale. Historically, Internet Explorer had a proprietary CSS property called filter to apply custom effects including grayscale.
Now, the filter property is part of the CSS3 specification and is supported in some browsers, including Firefox, Chrome and Safari. Previously, we also mentioned Webkit filters, which not only turn images to gray but also to sepia and blur effects.
Adding the following CSS style can turn the image into gray

Copy code
The code is as follows:

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

Supports 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 method is to use JavaScript. Technically, all browsers that support JavaScript should support JavaScript, including IE6 and below.

Copy code
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; y++){
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 is from SVG Filter. You need to create an SVG file, write the following code in it, and save it as ***.svg

Copy code
The code is as follows:

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="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 properties, we can connect to the SVG file by the ID of the element in the SVG file

Copy code
The code is as follows:

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

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

Copy code
The 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.3333%200%200%200.3333%200.3333%200.3333%200.3333%200%200%200%200%200%200%201%200'/></filter></svg>#grayscale");')
}

In summary, in order to support grayscale effects across browsers, we can use the above methods together with the following code snippet to achieve it. This code will support Firefox 3.5+, Opera 15+, Safari, Chrome, and IE

Copy code
The 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 leverage the above code with the JavaScript approach and just provide the CSS filter as a fallback in case JavaScript is disabled. This idea can be easily implemented with the help of Modernizr.

Copy code
The 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 cool effect on your browser! !

<<:  Simple example of HTML text formatting (detailed explanation)

>>:  How to implement Hover drop-down menu with CSS

Recommend

A brief summary of my experience in writing HTML pages

It has been three or four months since I joined Wo...

A simple example of mysql searching for data within N kilometers

According to the coefficient of pi and the radius...

MySQL 8.0.12 installation and configuration graphic tutorial

Recorded the download and installation tutorial o...

Interview questions: The difference between the Holy Grail layout and the double-wing layout

Preface Today I will share with you a holy grail ...

Rules for registration form design

I finished reading "Patterns for Sign Up &...

Call js function or js variable in html's img src="" to dynamically specify the image path

I have found a lot of online resources on this pro...

ThingJS particle effects to achieve rain and snow effects with one click

Table of contents 1. Particle Effects 2. Load the...

Detailed steps to install Anaconda on Linux (Ubuntu 18.04)

Anaconda is the most popular python data science ...

HTML structured implementation method

DIV+css structure Are you learning CSS layout? Sti...

5 JavaScript Ways to Flatten Arrays

Table of contents 1. Concept of array flattening ...

Basic reference types of JavaScript advanced programming

Table of contents 1. Date 2. RegExp 3. Original p...

Several ways to implement image adaptive container with CSS (summary)

There is often a scenario where the image needs t...

Common methods and problems of Docker cleaning

If you use docker for large-scale development but...

Detailed explanation of desktop application using Vue3 and Electron

Table of contents Vue CLI builds a Vue project Vu...

Analysis of Mysql data migration methods and tools

This article mainly introduces the analysis of My...