Shulou(Shulou.com)06/01 Report--

This article is about how HTML5 sets the image to grayscale. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Purpose

This demo will show you how to use html5 and jquery to switch between the grayscale image and the original image when the mouse moves over the image. Before the advent of html5, to achieve this function, you need to prepare two images, a grayscale image and an original image. But now it can be achieved faster and easier with the help of html5, because grayscale images are generated directly on the original image. I hope this js code will help you when creating a file or image display function.

Jquery code

The following jquery code will find the target image and generate a grayscale version. When you move your mouse over the picture, the grayscale picture becomes the primary color.

The copy code is as follows:

/ / the window load event is set to wait for all images to be loaded before running.

$(window) .load (function () {

/ / gradually enter the picture so that the original image with color will not be displayed, and then execute the window load event

$(".item img") .fadeIn

/ / copy the picture

$('.item img') .each (function () {

Var el = $(this)

El.css ({"position": "absolute"}). Wrap ("). Clone (). AddClass ('img_grayscale'). 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)

});

/ / make the picture step by step

$('.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 gray images

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 < imgPixels.height; yearly +) {

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 ()

}

How to use

Follow these steps:

Quote jquery.js

Copy the above code

Set the target image (eg: .post-img, img, .picture img, etc.)

You can also set the speed of the animation (ie. 1000 = 1 second)

Compatibility

I tried all the browsers that support html5 and canvas, such as Chrome, Safari, and Firefox. If it is a browser that does not support html5, he will only use the original image and will not generate grayscale images.

Note: if the local html file cannot be run on firefox and chrome, you will need to deploy the html file to the server.

Self-practice

I tested myself according to the tutorial and found something to pay attention to. Using firefox to open the page, the program does not run correctly, but it can run after deploying the relevant code to the server.

You must make sure it is a local picture, otherwise you have to report to Security error.

This is because:

Canvas is a canvas element in the HTML5 standard that can be used to draw 2 D and 3 D images.

But when debugging, it is easy to encounter Security error problems.

At present, the Security error I have encountered in debugging mainly appears on toDataURL () and src.

Security error states that there is no semantic problem with this code, but it does not work properly for security reasons.

For throw Security error:

Using cross-domain pictures in Canvas

Debug in a local serverless environment

Unable to get the relationship between the current domain and the picture

Some of the solutions found on stackoverflow are usually for you to solve cross-domain problems.

But in fact, if you do not use server software when debugging locally, it will also cause this problem.

For example, toDataURL function is used when debugging locally, and local picture files are used in Canvas at this time. Throw security error can still be found in Chrome and Firefox.

A common solution is to set up a server environment locally, or submit the content to the server for debugging.

Thank you for reading! This is the end of the article on "how to set the picture to a grayscale image by HTML5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.