HTML5 practice-setting images to grayscale_html5 tutorial skills

In the past, to display grayscale images on the web, you had to manually convert them using image software. But now this process can be achieved with the help of HTML5 canvas, without the need to use image editing software. I made a demo using html5 and jquery to show 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 original image when the mouse moves out of the image. Before the emergence of HTML5, to implement this function, you needed to prepare two images, one grayscale image and one original image. But now it can be achieved faster and easier with the help of HTML5, because the grayscale image is generated directly on the original image. I hope this js code will be helpful when you create a file or image display function.

Rendering jquery code The following jquery code will find the target image and generate a grayscale Version. When you move your mouse over the image, the grayscale image changes to primary color.

Copy code The code is as follows: // The window load event is set to wait for all images to be loaded. Run $(window).load(function(){ // to make the image fade in, so that the original image with color will not be displayed, and then execute the window load event $( ".item img").fadeIn(500); //Copy image $('.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 image fade in $('.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 make gray pictures 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 &lt ; imgPixels.width; x ){ var i = (y * 4) * imgPixels.width x * 4; [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 the steps below: Reference jquery.js Copy the above code Set the target image (eg: .post-img, img, . gallery img, etc.) You can also set the speed of the animation (ie. 1000 = 1 second) Compatibility I tried everything that supports html5 and canvas browsers, such as Chrome, Safari, and Firefox. If it is a browser that does not support HTML5, it will only use the original image and will not generate a grayscale image. Note: If the local html file cannot run on firefox and chrome, you need to deploy the html file to the server.

Self-Practice I tested it myself according to the tutorial and found some things that need attention. When I opened the page using firefox, the program did not run correctly, but after deploying the relevant code to the server It works. It must be a local image, otherwise a Security error will be reported. This is because : Canvas is a canvas element in the HTML5 standard and can be used to draw 2D and 3D images. But it is easy to encounter Security error problems when debugging. At present, the Security errors I have encountered during debugging mainly appear in toDataURL() and src. Security error means that this code has no semantic problems, but it cannot run normally due to security reasons.

Throw Security error : Using cross-domain images in Canvas Debugging in a local serverless environment Unable to obtain the relationship between the current domain and the image In Some solutions found on stackoverflow usually allow you to solve cross-domain problems. But in fact, this problem will also occur if you do not use server software when debugging locally. For example: use the toDataURL function when debugging locally, At this time, local image files are used in Canvas. Security errors will still be thrown in Chrome and Firefox. A common solution is to set up a server environment locally, or submit the content to the server for debugging.