js实现ostu

实现Otsu算法的JavaScript代码

Otsu算法是一种用于图像二值化的自动阈值选择方法，通过最大化类间方差来确定最佳分割阈值。

Otsu算法原理

1. 计算图像的灰度直方图
2. 遍历所有可能的阈值t(0-255)
3. 对于每个阈值t，将图像分为前景和背景两类
4. 计算两类之间的类间方差σ²
5. 选择使σ²最大的阈值作为最佳阈值

JavaScript实现代码

function otsuThreshold(imageData) {
    const pixels = imageData.data;
    const histogram = new Array(256).fill(0);

    // 计算灰度直方图
    for (let i = 0; i < pixels.length; i += 4) {
        const r = pixels[i];
        const g = pixels[i + 1];
        const b = pixels[i + 2];
        const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
        histogram[gray]++;
    }

    const total = pixels.length / 4;
    let sum = 0;
    for (let t = 0; t < 256; t++) {
        sum += t * histogram[t];
    }

    let sumB = 0;
    let wB = 0;
    let wF = 0;
    let maxVar = 0;
    let threshold = 0;

    for (let t = 0; t < 256; t++) {
        wB += histogram[t]; // 背景权重
        if (wB === 0) continue;

        wF = total - wB; // 前景权重
        if (wF === 0) break;

        sumB += t * histogram[t];

        const mB = sumB / wB; // 背景均值
        const mF = (sum - sumB) / wF; // 前景均值

        // 计算类间方差
        const varBetween = wB * wF * (mB - mF)  2;

        if (varBetween > maxVar) {
            maxVar = varBetween;
            threshold = t;
        }
    }

    return threshold;
}

// 使用示例
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const threshold = otsuThreshold(imageData);
    console.log('Otsu threshold:', threshold);
};
img.src = 'image.jpg';

算法优化

1. 可以预先计算并存储累加直方图来提高性能
2. 对于大图像，可以考虑下采样后再计算阈值
3. 实现多通道Otsu算法时，需要对每个通道单独计算

应用场景

1. 文档图像二值化
2. 医学图像分割
3. 车牌识别预处理
4. 任何需要自动确定阈值的图像处理任务

该实现直接操作ImageData对象，适合在浏览器环境中使用Canvas API处理图像。返回的阈值可用于后续的二值化操作。