Comment: HTML5, So magical. The program was tested in Google browser. Interested friends can refer to the specific steps to implement image grayscale by using the HTML5 component Canvas explained in this article. I hope it will be helpful to you.
Create a new html page and add it between body tags
<canvas >Gray Filter</canvas>
Add a simplest JavaScript script
<pre>window.onload = function() {
var canvas = document.getElementById("myCanvas");
<span> </span>// TODO: do something here
}
The code for getting the drawing object context Context from the Canvas object is as follows:
var context = canvas.getContext("2d");
The html code to add an image to the html page is as follows
<img src="hanjiaren.jpg" />
The javascript code for obtaining the image object from the html img object is as follows:
var image = document.getElementById("imageSource");
The code for drawing the resulting image in the Canvas object is as follows:
context.drawImage(image, 0, 0);
The code for obtaining image pixel data from a Canvas object is as follows:
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
The code for reading pixel values and implementing grayscale calculation is as follows:
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
// calculate gray scale value
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
Where the calculation grayscale formula is gray color = 0.299 × red color + 0.578 × green color + 0.114 * blue color
The read pixel values are RGBA, which represent red color, green color, blue color, alpha channel.
The processed data must be reloaded into Canvas. The code is as follows:
context.putImageData(canvasData, 0, 0);
The final effect of the program is as follows:
The complete source code is as follows:
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var image = document.getElementById("imageSource");
// re-size the canvas deminsion
canvas.width = image.width;
canvas.height = image.height;
// get 2D render object
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
alert(canvasData.width.toString());
alert(canvasData.height.toString());
// gray filter
for ( var x = 0; x < canvasData.width; x++) {
for ( var y = 0; y < canvasData.height; y++) {
// Index of the pixel in the array
var idx = (x + y * canvasData.width) * 4;
var r = canvasData.data[idx + 0];
var g = canvasData.data[idx + 1];
var b = canvasData.data[idx + 2];
// calculate gray scale value
var gray = .299 * r + .587 * g + .114 * b;
// assign gray scale value
canvasData.data[idx + 0] = gray; // Red channel
canvasData.data[idx + 1] = gray; // Green channel
canvasData.data[idx + 2] = gray; // Blue channel
canvasData.data[idx + 3] = 255; // Alpha channel
// add black border
if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
{
canvasData.data[idx + 0] = 0;
canvasData.data[idx + 1] = 0;
canvasData.data[idx + 2] = 0;
}
}
}
context.putImageData(canvasData, 0, 0); // at coords 0,0
};
</script>
</head>
<body>
<h2>Hello World!</h2>
<img src="hanjiaren.jpg" />
<canvas >Gray Filter</canvas>
</body>
</html>
The files in the code can replace any image files you want to see
HTML5, so magical. The program is tested in Google browser.
Last advice, don't try to run the above code locally. Google's security check will automatically block reading and writing non-domain files from the browser.
It is best to post it on tomcat or any web container server and view the effect from Google browser.