使用HTML5技术实现Otsu算法(大津法)(2)_H5之家 - 中国HTML5教程资源分享第一站

算法的实现中给出了详细的注释，如果有不清楚的地方可以留言或者发邮件咨询，值得注意的是，由于js不允许跨域访问的特性，要想成功运行上面的代码，必须将它运行在一个服务器中，比如说Apache。

代码详单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>gray.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript"> function ProcessToGrayImage(){ var canvas = document.getElementById('myCanvasElt'); var ctx = canvas.getContext('2d'); var img=new Image() img.src="image/VerifyCode.jpg" ctx.drawImage(img,0,0); var canvasData = ctx.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 * canvas.width) * 4; // The RGB values var r = canvasData.data[idx + 0]; var g = canvasData.data[idx + 1]; var b = canvasData.data[idx + 2]; // Update the values of the pixel; var gray = CalculateGrayValue(r , g , b); canvasData.data[idx + 0] = gray; canvasData.data[idx + 1] = gray; canvasData.data[idx + 2] = gray; } } ctx.putImageData(canvasData, 0, 0); } //计算图像的灰度值,公式为：Gray = R*0.299 + G*0.587 + B*0.114 function CalculateGrayValue(rValue,gValue,bValue){ return parseInt(rValue * 0.299 + gValue * 0.587 + bValue * 0.114); } //一维OTSU图像处理算法 function OTSUAlgorithm(){ var m_pFstdHistogram = new Array();//表示灰度值的分布点概率 var m_pFGrayAccu = new Array();//其中每一个值等于m_pFstdHistogram中从0到当前下标值的和 var m_pFGrayAve = new Array();//其中每一值等于m_pFstdHistogram中从0到当前指定下标值*对应的下标之和 var m_pAverage=0;//值为m_pFstdHistogram【256】中每一点的分布概率*当前下标之和 var m_pHistogram = new Array();//灰度直方图 var i,j; var temp=0,fMax=0;//定义一个临时变量和一个最大类间方差的值 var nThresh = 0;//最优阀值 //获取灰度图像的信息 var imageInfo = GetGrayImageInfo(); if(imageInfo == null){ window.alert("图像还没有转化为灰度图像！"); return; } //初始化各项参数 for(i=0; i<256; i++){ m_pFstdHistogram[i] = 0; m_pFGrayAccu[i] = 0; m_pFGrayAve[i] = 0; m_pHistogram[i] = 0; } //获取图像信息 var canvasData = imageInfo[0]; //获取图像的像素 var pixels = canvasData.data; //下面统计图像的灰度分布信息 for(i=0; i<pixels.length; i+=4){ //获取r的像素值，因为灰度图像，r=g=b，所以取第一个即可 var r = pixels[i]; m_pHistogram[r]++; } //下面计算每一个灰度点在图像中出现的概率 var size = canvasData.width * canvasData.height; for(i=0; i<256; i++){ m_pFstdHistogram[i] = m_pHistogram[i] / size; } //下面开始计算m_pFGrayAccu和m_pFGrayAve和m_pAverage的值 for(i=0; i<256; i++){ for(j=0; j<=i; j++){ //计算m_pFGaryAccu[256] m_pFGrayAccu[i] += m_pFstdHistogram[j]; //计算m_pFGrayAve[256] m_pFGrayAve[i] += j * m_pFstdHistogram[j]; } //计算平均值 m_pAverage += i * m_pFstdHistogram[i]; } //下面开始就算OSTU的值，从0-255个值中分别计算ostu并寻找出最大值作为分割阀值 for (i = 0 ; i < 256 ; i++){ temp = (m_pAverage * m_pFGrayAccu[i] - m_pFGrayAve[i]) * (m_pAverage * m_pFGrayAccu[i] - m_pFGrayAve[i]) / (m_pFGrayAccu[i] * (1 - m_pFGrayAccu[i])); if (temp > fMax) { fMax = temp; nThresh = i; } } //下面执行二值化过程 for(i=0; i<canvasData.width; i++){ for(j=0; j<canvasData.height; j++){ //取得每一点的位置 var ids = (i + j*canvasData.width)*4; //取得像素的R分量的值 var r = canvasData.data[ids]; //与阀值进行比较，如果小于阀值，那么将改点置为0，否则置为255 var gray = r>nThresh?255:0; canvasData.data[ids+0] = gray; canvasData.data[ids+1] = gray; canvasData.data[ids+2] = gray; } } //显示二值化图像 var newImage = document.getElementById('myCanvasThreshold').getContext('2d'); newImage.putImageData(canvasData,0,0); } //获取图像的灰度图像的信息 function GetGrayImageInfo(){ var canvas = document.getElementById('myCanvasElt'); var ctx = canvas.getContext('2d'); var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height); if(canvasData.data.length==0){ return null; } return [canvasData,ctx]; } //下面对灰度图像进行处理，将目标信息分割出来 function DividedTarget(){ //读取二值化图像信息 var imageInfo = document.getElementById('myCanvasThreshold'); if(imageInfo == null){ window.alert("没有发现二值化图像信息！"); return; } //取得上下文 var ctx = imageInfo.getContext('2d'); //获取图像数据 var canvasData = imageInfo.getImageData(0, 0, ctx.width, ctx.height); var newVanvasData = canvasData; //取得图像的宽和高 var width = canvasData.width; var height = canvasData.height; //算法开始 var cursor = 2; for(var x=0; x<width; x++){ for(var y=0; y<height; y++){ //取得每一点的位置 var ids = (x + y*canvasData.width)*4; //取得像素的R分量的值 var r = canvasData.data[ids]; //如果是目标点 if(r==0){ } } } } </script> </head> <body> 原图像：<br/> <img src="image/VerifyCode.jpg" /><br/> 灰度图像：<input type="button" value="处理"color: #8b0000;">javascript:ProcessToGrayImage();" /><br/> <canvascolor: #8b0000;">myCanvasElt"color: #8b0000;">200"color: #8b0000;">100"></canvas><br/> 二值化图像：<input type="button" value="二值化"color: #8b0000;">javascript:OTSUAlgorithm();" /><br/> <canvascolor: #8b0000;">myCanvasThreshold"color: #8b0000;">200"color: #8b0000;">100"></canvas><br/> </body> </html> 总结说明

HTML5的新特性，为前端开发人员提供了更加广阔的施展空间，js对图像处理方面的支持使得算法的实现更加方便、快捷。