急求啊!!关于html5对图像处理的例子

a13849178851 2016-01-12 09:23:27
这段html代码我只在火狐中试验成功了。
例子中代码把图像二值化了,关键代码应该是例子中的109行,我希望把白色的部分替换成原图,也就说是不用255给它填充,而用原图填充。
但是小弟才疏学浅,不知道代码该怎么改,试了多次均不成功,真是迷茫了!
求大侠们指导一二!能给出代码我就跪谢了。。。。


<!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">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function ProcessToGrayImage(){
var canvas = document.getElementById('myCanvasElt');
var ctx = canvas.getContext('2d');
var img=new Image()
img.src="i.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="i.jpg" /><br/>
灰度图像:<input type="button" value="处理" onclick="javascript:ProcessToGrayImage();" /><br/>
<canvas id="myCanvasElt" ></canvas><br/>
二值化图像:<input type="button" value="二值化" onclick="javascript:OTSUAlgorithm();" /><br/>
<canvas id="myCanvasThreshold"></canvas><br/>
</body>
</html>
...全文
84 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2016-01-12
  • 打赏
  • 举报
回复

   //下面执行二值化过程 
   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
         if (r<=nThresh) {
             canvasData.data[ids+0] = 0;
             canvasData.data[ids+1] = 0;
             canvasData.data[ids+2] = 0;
         }
      }
   }

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧