发现html5中的canvas组件功能是如此的强大，不怪很多牛人预言flash已死，死不死
不是我要关心的，我关心的canvas可以很轻松在网页中实现简单相框和图像灰度化。
一起来看看html5 canvas是怎么做到的吧！
1. 新建一个html页面，在body tag之间加入
<canvas id="mycanvas" >gray filter</canvas>
2. 添加一段最简单的javascript代码：
window.onload = function() { var canvas = document.getelementbyid("mycanvas"); // do something here!! }
从canvas对象获取绘制对象上下文context的代码如下：
var context = canvas.getcontext("2d");
在html页面中加入一幅图像的html代码如下:
<img id="imagesource" src="hanjiaren.jpg" alt="canvas source" />
从html img对象中获取image 对象的javascript代码如下：
var image = document.getelementbyid("imagesource");
将得到的图像绘制在canvas对象中的代码如下:
context.drawimage(image, 0, 0);
从canvas对象中获取图像像素数据的代码如下：
var canvasdata = context.getimagedata(0, 0, canvas.width, canvas.height);
读取像素值与实现灰度计算的代码如下：
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; } } }
其中计算灰度公式为 gray color = 0.299 × red color + 0.578 × green color + 0.114 * blue color
读取出来的像素值顺序为rgba 分别代表red color, green color, blue color, alpha channel
处理完成的数据要重新载入到canvas中。代码如下：
context.putimagedata(canvasdata, 0, 0);
程序最终的效果如下：
完全源代码如下：
<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 id="imagesource" src="hanjiaren.jpg" alt="canvas source" /> <br /> <canvas id="mycanvas" >gray filter</canvas> </body> </html>
代码中的文件可以替换任意你想要看到的图片文件,html5, 原来如此神奇。
程序在google浏览器中测试通过千万不要在本地尝试运行上面的代码，google
浏览器的安全检查会自动阻止从浏览器中读写非domain的文件最好在tomcat或
者任意个web container的server上发布以后从google浏览器查看效果即可。
以上就是html5 组件canvas实现图像灰度化的实例代码的内容。