HTML5 practice-set images to grayscale images

Comments: Previously, to display grayscale images on the web, you only need to manually use the image software for conversion. But now we can implement this process with the help of html5 canvas, without the need to use image editing software. Previously, to display grayscale images on the web, we only need to manually use the image software for conversion. But now we can implement this process with the help of html5 canvas, without the need for image editing software. I used html5 and jquery to make a demo to demonstrate how to implement this function.

Purpose
This demo will show you how to use html5 and jquery to switch between the grayscale image and the source image when moving the mouse over the image. Before html5 appears, you need to prepare two images, one grayscale image and one original image, to implement this function. But now html5 can be used to achieve faster and easier, because grayscale images are generated directly on the source image. I hope this js Code will help you create a file or image display function.


 
Jquery code
The following jquery code looks for the target image and generates a grayscale version. When you move the mouse over an image, the grayscale image becomes the primary color.

The Code is as follows:
<Script src = "jquery. min. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
// Set the window load event to run after all images are loaded.
$ (Window). load (function (){
// Gradient the image so that the color of the source image will not be displayed, and then execute the window load event.
$ (". Item img"). fadeIn (500 );
// Copy the image
$ ('. Item img'). each (function (){
Var el = $ (this );
El.css ({"position": "absolute "}). wrap ("<div class = 'img _ wrapper 'style = 'display: inline-Block'>" mirror.clone().addclass('img_grayscale'mirror.css ({"position": "absolute", "z-index ": "998", "opacity": "0 "}). insertBefore (el ). queue (function (){
Var el = $ (this );
El.parent().css ({"width": this. width, "height": this. height });
El. dequeue ();
});
This. src = grayscale (this. src );
});
// Gradually import the image
$ ('. Item img'). mouseover (function (){
$ (This). parent (). find ('img: first'). stop (). animate ({opacity: 1}, 1000 );
})
$ ('. Img_grayscale'). mouseout (function (){
$ (This). stop (). animate ({opacity: 0}, 1000 );
});
});
// Use canvas to create a gray image
Function grayscale (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 For (var x = 0; 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 ();
}
</Script>

How to Use
Follow these steps:
Reference jquery. js
Copy the above Code
Set the target image (eg:. post-img, img,. gallery img, etc .)
You can also set the animation speed (ie. 1000 = 1 second)
 
Compatibility
I tried all browsers that support html5 and canvas, such as Chrome, Safari, and Firefox. If it is a browser that does not support html5, it only uses the source image and does not generate grayscale images.
Note: If the local html file cannot run on firefox or chrome, You need to deploy the html file on the server.

Self-Practice
I tested it according to the tutorial and found some precautions. When I opened the page using firefox, the program could not run correctly, but the relevant code can be run after being deployed to the server.
The image must be a local image. Otherwise, a Security error is reported.
This is because:
Canvas is a Canvas element in the HTML5 standard and can be used to draw 2D and 3D images.
However, it is easy to encounter Security error during debugging.
Currently, Security errors I encountered during debugging mainly occur on toDataURL () and src.
Security error indicates that this code has no semantic problems, but it cannot run properly due to Security reasons.

Throw Security error:
Use cross-origin images in Canvas
Debug in a local serverless Environment
Unable to obtain the relationship between the current domain and the image
Some solutions found on stackoverflow are usually used to solve cross-domain problems.
But in fact, if you do not use the server software during local debugging, this problem will also occur.
For example, if the toDataURL function is used for local debugging, the Canvas uses a local image file. In Chrome and Firefox, throw security error occurs.
A common solution is to set up a local server environment or submit the content to the server for debugging.