HTML5 Canvas implements Image Grayscale (Step + instance effect )-

HTML5 is amazing. The program passed the test in the google browser. Do not run the above Code locally. google's security check will automatically block the reading and writing of non-domain files from the browser ....,. HTML5 Canvas implements Image Grayscale (Step + instance effect)

Create an html page and add it between the body tags

 
  Gray Filter
 

Add the simplest JavaScript script

window.onload = function() { var canvas = document.getElementById("myCanvas");  // TODO: do something here }
The code for obtaining the Context of the drawn object from the Canvas object is as follows:
var context = canvas.getContext("2d");
The html code for adding an image to the html page is as follows:
The javascript code for retrieving an image object from an html img object is as follows:
var image = document.getElementById("imageSource");
The code for drawing the image in the Canvas object is as follows:
context.drawImage(image, 0, 0);
The code for retrieving 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; } } }
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:
  《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》   Hello World!  
  
   Gray Filter
    
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.

The above is the HTML5 Canvas Implementation of Image Grayscale (Step + instance effect) content. For more information, see PHP Chinese Network (www.php1.cn )!