javascript 图像二值化处理

代码

<html><head><meta charset="utf-8"><title></title>
</head><body onload="showImg()"><canvas id="canvas" onclick="showImg()" width="300" height="200"></canvas><img id="img" src="1.jpg" width="300" height="200" hidden=""><div style="margin: 10px;"><span>二值化阈值：</span><span id="threshold">148</span></div><div style="display: flex;margin: 20px 5px;"><span style="flex: 1 0 65px;">0 - 255</span><input type="range" value="0" onchange="showImg(this.value)" id="range" max="255" min="0" step="1" style="flex: 1 1 100%;"></div><script>var canvas = document.getElementById('canvas');var img = document.getElementById('img');var input = document.getElementById('range');var thresholdEle = document.getElementById('threshold');var c = canvas.getContext('2d');canvas.width = img.width;canvas.height = img.height;function showImg(threshold) {c.drawImage(img, 0, 0, canvas.width, canvas.height);var imgData = c.getImageData(0, 0, canvas.width, canvas.height);var index = threshold ? threshold : OTSUAlgorithm(imgData);//阈值thresholdEle.innerHTML = indexfor (var i = 0; i < imgData.data.length; i += 4) {var R = imgData.data[i]; //R(0-255)var G = imgData.data[i + 1]; //G(0-255)var B = imgData.data[i + 2]; //B(0-255)var Alpha = imgData.data[i + 3]; //Alpha(0-255)var sum = (R + G + B) / 3;if (sum > index) {imgData.data[i] = 255;imgData.data[i + 1] = 255;imgData.data[i + 2] = 255;imgData.data[i + 3] = Alpha;} else {imgData.data[i] = 0;imgData.data[i + 1] = 0;imgData.data[i + 2] = 0;imgData.data[i + 3] = Alpha;}}c.putImageData(imgData, 0, 0);}//一维OTSU图像处理算法function OTSUAlgorithm(canvasData) {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;//最优阀值//初始化各项参数for (i = 0; i < 256; i++) {m_pFstdHistogram[i] = 0;m_pFGrayAccu[i] = 0;m_pFGrayAve[i] = 0;m_pHistogram[i] = 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;}}return nThresh}  </script></body></html>

处理前

处理后

javascript 图像二值化处理相关推荐

OpenCV+python：图像二值化
1,图像二值化概念及方法一个像素点的颜色是由RGB三个值来表现的,所以一个像素点矩阵对应三个颜色向量矩阵,分别是R矩阵,G矩阵,B矩阵,它们也都是同样大小的矩阵. 在图像处理中,用RGB三个分量(R ...
OpenCV（基础补充）图像二值化
目录一.基础理论 1.二值图像概念 2.API介绍二.图像二值化(黑白化)步骤: 1.彩图化灰度图 2.灰度图化黑白图(二值化) 3.翻转黑白部分总代码参考资料一.基础理论 1.二值图像概念 ...
【OpenCV 4开发详解】图像二值化
本文首发于"小白学视觉"微信公众号,欢迎关注公众号本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
Python使用openCV把原始彩色图像转化为灰度图、使用OpenCV把图像二值化（仅仅包含黑色和白色的简化版本）、基于自适应阈值预处理（adaptive thresholding）方法
Python使用openCV把原始彩色图像转化为灰度图.使用OpenCV把图像二值化(仅仅包含黑色和白色的简化版本).基于自适应阈值预处理(adaptive thresholding)方法目录
OTSU算法对图像二值化
出处:http://blog.csdn.net/WuHaibing_CVer OTSU算法是由日本学者OTSU于1979年提出的一种对图像进行二值化的高效算法. 1. OTSU算法原理简介对于一幅图 ...
python 图像二值化
自适应二值化,高斯加权二值化: image =cv2.imread(r'E:\data\barcode\test\1009_11\test\blur\509915979678918664.jpg', ...
python opencv二值化图像_python opencv，读取彩色图像，提取三通道，图像二值化，提取图像的边缘...
python opencv,读取彩色图像,提取三通道,图像二值化,提取图像的边缘 python opencv 1,读取图像 2,图像变矩阵 3,图像转灰度图像 4,彩色图像是3D数组 5,灰度图像是2 ...
二值化图像的欧拉数_Android OpenCV（八）：图像二值化
图像二值化简介图像二值化( Image Binarization)就是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的黑白效果的过程.在数字图像处理中,二值图像占有非常重要的 ...
Python-OpenCV 处理图像（八）：图像二值化处理
0x00. 图像二值化图像二值化就是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的黑白效果. 将256个亮度等级的灰度图像通过适当的阈值选取而获得仍然可以反映图像整体和局部特 ...
Python-OpenCV 处理图像（六）(七)（八）：对象识别图像灰度化处理图像二值化处理
为了加快处理速度,在图像处理算法中,往往需要把彩色图像转换为灰度图像. 0x00. 灰度图灰度数字图像是每个像素只有一个采样颜色的图像,这类图像通常显示为从最暗黑色到最亮的白色的灰度. 灰度图像与黑 ...

javascript 图像二值化处理

javascript 图像二值化处理相关推荐

最新文章

热门文章