HTML5 practice-gray image gallery

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 for image editing software. I used HTML5 and jquery to make a demo to demonstrate how to implement this function.

Demo address: http://webdesignerwall.com/demo/html5-grayscale/

 

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.

<SCRIPT src = "jquery. min. JS "type =" text/JavaScript "> </SCRIPT> <SCRIPT type =" text/JavaScript "> // set the window load event to run after all the 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 an 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) ;}); // increase the image to $ ('. item IMG '). mouseover (function () {$ (this ). parent (). find ('img: First '). stop (). animate ({opacity: 1}, 1000) ;}) $ ('. img_grayscale '). mouseout (function () {$ (this ). stop (). animate ({opacity: 0}, 1000) ;}); // create a gray image using canvas 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 

 

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:

1. Use cross-origin images in canvas
2. Debug in a local serverless Environment
3. 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.

 

Address: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover