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:
