Cross-browser image grayscale (grayscale) solution

E10 started to abandon this private filter, but has not yet provided support for standard Cssfilter, so it is still a problem to say that the grayscale image of IE10 above.
2.W3C CSS Filter Mode
CSS3 provides a standard CSS filter scheme in the form of the IE private filter, which can support grayscale grayscale, sepia brown, saturate saturation, hue-rotate hue rotation , invert anti-color, opacity transparency, brightness brightness, contrast contrast, blur blur, Drop-shadow shadow, etc. 10 effects. About CSS3 filter You can refer to the following tutorials: The desert's "CSS3 Filter 10 special effects" and Adobe's "CSS filter Lab."
The code that implements the grayscale grayscale image is like this
[CSS] View plaincopy
img{ 
 -webkit-filter:grayscale (100%);    /* WebKit kernel support is good */ 
   -moz-filter:grayscale (100%);    /* Other kernels are not supported now, write for future compatibility */  
     -ms-filter:grayscale (100%);  
     -o-filter:grayscale (100%); nbsp
         filter:grayscale (100%),    /* standard notation */ 
}  
where grayscale ( The value is 0%-100%, can also be replaced with 0-1, 0% for the color image, 100% for the full grayscale. The browser compatibility of the
CSS filter is as follows, Chrome31+,safari7+,opera20+,ios safari6+,android Browser4.4+,blackberry All support the way of-webkit-filter, IE does not support, Firefox does not support.

So we need to consider the compatibility of IE and Firefox, fortunately for Firefox to support SVG effects for HTML, then we introduce.
3.SVG Effects for HTML mode
Although Firefox does not support CSS filter, but support SVG effects for html,html file can call SVG inside the effect, not only filters, but also can be mask, clip, etc., you can refer to the MDN on the article " Applying SVG effects to HTML content.
The browser compatibility of SVG effects for HTML is as shown.

First, you need to declare a filter in an SVG that can be embedded in an HTML file or saved separately.
[HTML] View plaincopy
<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>
If the file is saved as a separate file gray.svg, we can refer to it in the HTML file.
[CSS] View plaincopy
img{
Filter:url (' Gray.svg#grayscale '); /* Grayscale filter placed in the Gray.svg file ID is called grayscale filter */
}
If the file is embedded in an HTML file, this is the reference
[CSS] View plaincopy
img{
Filter:url (' #grayscale '); HTML file embedded in the/*svg filter */
}
Of course, we can also directly embed the SVG file into the CSS, if you do not have the code neat.
[CSS] View plaincopy
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 ");
}
Above the way we can compatible with most browsers (except IE10, IE11), the compatible grayscale code is as follows.
[CSS] View plaincopy
img{
-webkit-filter:grayscale (100%); /* CSS3 filter mode, WebKit kernel mode, most of the modern browsers outside of Firefox */
-moz-filter:grayscale (100%); /* not currently implemented */
-ms-filter:grayscale (100%);
-o-filter:grayscale (100%);
Filter:grayscale (100%); /* CSS3 filter method, standard notation */
Filter:url (Filters.svg#grayscale); /* Firefox 4+ */
Filter:gray; /* IE 6-9 */
}
img:hover{
-webkit-filter:grayscale (0%);
-moz-filter:grayscale (0%);
-ms-filter:grayscale (0%);
-o-filter:grayscale (0%);
Filter:grayscale (0%);
Filter:none; /* Firefox 4+, IE 6-9 */
}
4.js implementations
For IE10, 11, what do we do? You have to use JS.
[JavaScript] View plaincopy
var imgobj = document.getElementById (' Imgtogray ');

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);
This solution is mainly referred to Ajaxblender's "Convert Images to Grayscale" and you can read more.
5. Cross Browser solution
The scheme is mainly referred to the Cross-browser grayscale image example using CSS3 + JS v2.0. With browser feature detection using MODERNIZR, English-speaking children's shoes can be viewed. Bo Master wrote two about using JS to achieve cross-browser resolution of gray-scale image of the blog, the first self-implemented browser detection, the second use of Modernizr.
The solution uses jquery and Modernizr, so need to be introduced, omitted here, do not know how to introduce children's shoes, please consciously hit the south wall 100 times.
For IE browser
[JavaScript] View plaincopy
IE Ten only CSS properties
var ie10styles = [
' Mstouchaction ',
' Mswrapflow '];

var ie11styles = [
' Mstextcombinehorizontal '];

/*
* Test all IE only CSS properties
*/

var d = document;
var B = d.body;
var s = b.style;
var brwoser = null;
var property;

Tests IE10 Properties
for (var i = 0; i < ie10styles.length; i++) {
property = Ie10styles[i];
if (S[property]! = undefined) {
Brwoser = "Ie10";
}
}

Tests IE11 Properties
for (var i = 0; i < ie11styles.length; i++) {
property = Ie11styles[i];
if (S[property]! = undefined) {
Brwoser = "Ie11";
}
}

Grayscale images only on browsers ie10+ since they removed support for CSS grayscale filter
if (Brwoser = = "Ie10" | | brwoser = = "Ie11") {
$ (' body '). addclass (' Ie11 '); Fixes Marbin issue on IE10 and IE11 after canvas function on images
$ ('. Grayscale img '). each (function () {
var el = $ (this);
El.css ({"position": "Absolute"}). Wrap ("<div class= ' img_wrapper ' style= ' Display:inline-block ' >"). Clone (). AddClass (' Img_grayscale ieimage '). css ({"position": "Absolute", "Z-index": "5", "Opacity": "0"}). InsertBefore (EL). Queue (function () {
var el = $ (this);
El.parent (). css ({"width": this.width, "height": this.height});
El.dequeue ();
});
THIS.SRC = Grayscaleie (THIS.SRC);
});

Quick Animation on ie10+
$ ('. Grayscale img '). Hover (
function () {
$ (this). The parent (). Find (' Img:first '). Stop (). Animate ({opacity:1}, 200);
},
function () {
$ ('. Img_grayscale '). Stop (). Animate ({opacity:0}, 200);
}
);

Custom grayscale function for IE10 and IE11
function Grayscaleie (SRC) {
var canvas = document.createelement (' canvas ');
var ctx = Canvas.getcontext (' 2d ');
var imgobj = new Image ();
IMGOBJ.SRC = src;
Canvas.width = Imgobj.width;
Canvas.height = Imgobj.height;
Ctx.drawimage (imgobj, 0, 0);
var imgpixels = ctx.getimagedata (0, 0, canvas.width, canvas.height);
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;
}
}
Ctx.putimagedata (imgpixels, 0, 0, 0, 0, imgpixels.width, imgpixels.height);
return Canvas.todataurl ();
};
};
For other browsers
[JavaScript] View plaincopy
If The browser does not support CSS filters filters, we is applying grayscale.js function
This part of the grayscale images applies on Opera, Firefox and Safari browsers
if (! Modernizr.cssfilters) {
var $images = $ (". Grayscale img"), Imagecount = $images. Length, counter = 0;

One instead of on, because it need only fire once per image
$images. One ("Load", function () {
Increment counter every time an image finishes loading
counter++;
if (counter = = Imagecount) {
Do stuff if all has loaded
Grayscale ($ ('. Grayscale img '));
$ (". Grayscale img"). Hover (
function () {
Grayscale.reset ($ (this));
},
function () {
Grayscale ($ (this));
}
);
}
}). each (function () {
if (this.complete) {
Manually trigger Load event in
Event of a cache pull
$ (this). Trigger ("load");
}
});
}

Cross-browser image grayscale (grayscale) solution