Comment: In the past, if you wanted to display grayscale images on the web, you could only manually use the picture software to convert them. But now this process can be achieved with the help of html5 canvas, without the need to use image editing software
In the past, if you wanted to display grayscale images on the web, you could only manually use image software to convert them. But now this process can be achieved with the help of html5 canvas, without the need to use image editing software. I used html5 and jquery to make a demo to show how to implement this function.Purpose
This demo will show you how to switch between the grayscale image and the original image when moving the mouse on the image with html5 and jquery. Before html5 appeared, to implement this function, two pictures need to be prepared, one grayscale picture and one original picture. But now it can be achieved faster and easier with html5, because grayscale images are generated directly on the original image. I hope this js code will be helpful when you create file or picture display functions.
Reproduction diagram
jquery code
The following jquery code will look for the target image and generate a grayscale version. When you move your mouse to the picture, the grayscale picture will turn into the primary color.
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Set the window load event to wait for all pictures to load before running
$(window).load(function(){
// Make the picture gradually enter so that the original image with color will not be displayed, and then execute the window load event
$(".item img").fadeIn(500);
// Copy the picture
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div>").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 gradually enter
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Make gray pictures with 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 < 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, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
</script>
How to use
Follow the steps below:
Quote 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 all browsers that support html5 and canvas, 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 grayscale images.
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 to be paid attention to. I opened the page with firefox. The program cannot run correctly, but it can run after deploying the relevant code to the server.
It must be guaranteed to be a local image, otherwise you must report a Security error.
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 problems during debugging.
Currently, the Security errors I encountered during debugging mainly appear on toDataURL() and src.
Security error indicates that this code has no semantic problems, but it cannot run normally due to security reasons.
The situation of throw Security error:
Using cross-domain images in Canvas
Debugging in a local serverless environment
Unable to get the relationship between the current domain and the image
Some of the solutions found on stackoverflow are usually to let you solve cross-domain problems.
But in fact, if you do not use the server software during local debugging, it will also cause this problem.
For example: the toDataURL function is used during local debugging, and the local image file is used in Canvas. In Chrome and Firefox, security error will still be thrown.
A common solution is to set up a server environment locally, or submit the content to the server for debugging.