基于HTML5的轻量级图像处理引擎Demo

    前几天看了看腾讯Web前端Alloy Team的基于HTML5的专业级开源图像处理引擎，非常喜欢，毕竟这样的项目本身在国内就不多，更别说做得好的。我说的所谓这样的项目，指的是基于HTML5和javascript的图像处理技术的Web项目。

    Web前端在世界范围内越来越受到重视，国内也有很多优秀的Web前端团队。说到Web前端，就不得不提HTML5，这个发布了那么久却依然没有流行起来（起码看起来还没有）的，被苹果、Facebook等大公司推崇的最新网页标准和技术。

    HTML5为什么至今还没有流行起来，具体原因很复杂。有人想用HTML5做游戏，结果很失望地发现在性能上HTML5还不够好；有人想用HTML5做网站，又怕IE之流不支持最新的HTML5标准；有人想用HTML5做应用，以代替移动端的App，但是App开发技术已经比较成熟，没有所少人人愿意把移动App转到HTML5应用上（想想Facebook放弃Html5转到ios和Android App就知道）。

    不管怎么说，Html5在很多曾经对Html5有过很多期望的开发者看来，它还不够成熟。

    个人觉得，开发者还需要对Html5做更多的尝试，只有尝试过才知道好不好。Html5是一种标准，至于应该怎么用，没有人会给你制定标准。几乎每一个刚刚接触Html5的人都会有这样的一种感觉：真是太棒了，我以前从来没想过可以这样！确实，这样一种令人眼前一亮的技术，不管它好与坏，我们都愿意尝试。

    Alloy Team的尝试就是非常好的例子。在Web前端做图像处理，本身对时间性能要求不高（和游戏相比），而且可以完全抛弃Flash（很多网页版图像处理都是Flash的，比如美图看看网页版）。

    想起自己去年上过数字图像处理的课，做过一个Java版的图像处理软件，现在又刚开始接触HTML5，于是我也想做一个基于HTML5的图像处理应用。花了一天时间，做成现在的样子：

下面是灰度转换之后的：

下面是Sobel算子锐化（或者边缘检测）的结果：

下面是方形窗口（中值滤波）平滑多次的效果：

其它效果不一一列举，算法也都比较简单。

时间比较仓促，很多功能没有加进来。其实Java代码转Javascript代码也挺简单的，不过因为本身对Canvas画图像不熟悉，中间纠结了很长一节课的时间。

下面是代码，供大家分享，欢迎提出意见或建议。

/// 全局变量
// 模板
smooth1 = new Array(1, 1, 1, 1, 0, 1, 1, 1, 1); // 平滑模板 参数1/8
smooth2 = new Array(1, 2, 1, 2, 4, 2, 1, 2, 1); // 平滑模板 参数1/16
smooth3 = new Array(1, 1, 1, 1, 2, 1, 1, 1, 1); // 平滑模板 参数1/10
laplacian0 = new Array(0, -1, 0, -1, 4, -1, 0, -1, 0); // 拉普拉斯算子
laplacian1 = new Array(0, -1, 0, -1, 5, -1, 0, -1, 0); // 拉普拉斯算子
laplacian2 = new Array(1, 4, 1, 4, -20, 4, 1, 4, 1); // 拉普拉斯算子
Sobelx = new Array(1, 0, -1, 2, 0, -2, 1, 0, -1); // Sobel算子x
Sobely = new Array(-1, -2, -1, 0, 0, 0, 1, 2, 1); // Sobel算子y
Prewittx = new Array(1, 0, -1, 1, 0, -1, 1, 0, -1); // Prewitt算子x
Prewitty = new Array(-1, -1, -1, 0, 0, 0, 1, 1, 1); // Prewitt算子y

/// 处理函数
// 重置
function chongzhi(image) {
	ctx.drawImage(img, 0, 0);
}
// 图像求补
function qiubu(image) {
	var imageData = ctx.getImageData(0, 0, image.width, image.height);
	//ctx.clearRect(0, 0, image.width, image.height); // 清除画布原来的内容