HTML5 component Canvas realizes image grayscale

HTML5, it turns out to be so magical. The program passed the test in Google browser. Interested friends can refer to the specific steps of implementing grayscale of images with HTML5 component Canvas explained in this article. I hope it will be helpful to you

Create a new html page and add it to the body tag Add the following code between

:

<canvas id="myCanvas" >Gray Filter</canvas>

Add the simplest JavaScript script

and 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 to obtain the context of the drawing object from the Canvas object is as follows:

The code is as follows:

var context = canvas.getContext("2d");

Add a The html code of the image is as follows

The code is as follows:

<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" />

The javascript code to obtain the image object from the html img object is as follows:

The code is as follows:

var image = document.getElementById("imageSource");

The code to draw the obtained image in the Canvas object is as follows:

The code is as follows:

context.drawImage(image, 0, 0);

The code to obtain image pixel data from the Canvas object is as follows:

The code is as follows:

var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);

Read pixel values ​​and implement grayscale The code for degree 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 grayscale is gray color = 0.299 × red color 0.578 × green color 0.114 * blue color
The order of the pixel values ​​read out is RGBA, which respectively 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:

The code is as follows:

 
 
<script> 
window.onload = function() { 
var canvas = document.getElementById("myCanvas"); 
var image = document.getElementById(&quot;imageSource&quot;); 
// re-size the canvas deminsion 
canvas.width = image.width; 
canvas.height = image.height; 
// get 2D render object 
var context = canvas.getContext(&quot;2d&quot;); 
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 &lt; canvasData.width; x++) { 
for ( var y = 0; y &lt; 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 &lt; 8 || y &lt; 8 || x &gt; (canvasData.width - 8) || y &gt; (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!
 
<img id="imageSource" src="hanjiaren.jpg" alt="Canvas Source" /> 
<canvas id="myCanvas" >Gray Filter</canvas> 
 

The files in the code can be replaced with whatever you want The image file you want to see
HTML5, turns out to be so magical. The program passed the test in Google Chrome.
Final advice, never try to run the above code locally. The security check of Google Chrome will automatically prevent reading and writing non-domain files from the browser
Most Fortunately, after publishing on tomcat or any web container server, you can view the effect from Google browser.