Comments: HTML5, so amazing. The program passed the test in the google browser. If you are interested, refer to the HTML5 Canvas component described in this article to implement the specific steps of grayscale image. I hope it will help you.
Create an html page and add it between the body tags
The Code is as follows:
<Canvas id = "myCanvas"> Gray Filter </canvas>
Add the simplest JavaScript script
The Code is as follows:
<Pre name = "code" class = "javascript"> window. onload = function (){
Var canvas = document. getElementById ("myCanvas ");
<Span style = "white-space: pre"> </span> // TODO: do something here
}
The code for obtaining the Context of the drawn object from the Canvas object is as follows:
The Code is as follows:
Var context = canvas. getContext ("2d ");
The html code for adding an image to the html page is as follows:
The Code is as follows:
The javascript code for retrieving an image object from an html img object is as follows:
The Code is as follows:
Var image = document. getElementById ("imageSource ");
The code for drawing the image in the Canvas object is as follows:
The Code is as follows:
Context. drawImage (image, 0, 0 );
The code for retrieving image pixel data from a Canvas object is as follows:
The Code 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:
The Code 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;
}
}
}
The formula for calculating the gray level is gray color = 0.299 × red color + 0.578 × green color + 0.114 * blue color.
The read pixel values are in the red color, green color, blue color, and alpha channel order.
The processed data must be reloaded to the Canvas. The Code is as follows:
Context. putImageData (canvasData, 0, 0 );
The final effect of the program is as follows::
The full source code is as follows::
The 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>
<Canvas id = "myCanvas"> Gray Filter </canvas>
</Body>
</Html>
The file in the code can replace any image file you want to see
HTML5 is amazing. The program passed the test in the google browser,
The last piece of advice: Never try to run the above Code locally. google's security check will automatically block the reading and writing of non-domain files from the browser.
It is best to view the effect from google's browser after it is published on tomcat or any web container server.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
