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

How to set up a grayscale image in HTML5, I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

In the past, if you wanted to display grayscale pictures on web, you had to use image software to convert them manually. But now this can be done with the help of html5's canvas, without the need for image editing software. I made a demo with html5 and jquery to show how to do this.

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.

Effect picture

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 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; 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(); } 如何使用 依照下面的步骤： 引用jquery.js 复制上面的代码 设置目标图片(eg: .post-img, img, .gallery img, etc.) 你也可以设置动画的速度(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.

After reading the above, have you mastered the method of how to set the picture to grayscale image in HTML5? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.