如何在浏览器中执行对比度拉伸/规范化

How can I perform in-browser contrast stretching/normalization?

本文关键字：规范化 对比度 执行 浏览器      更新时间：2023-09-26

我在网页上有jpegs。我想在没有浏览器插件的情况下对这些图像执行客户端均衡（对比度拉伸）。我也接受直方图均衡的解决方案。

我目前使用两个CSS过滤器（-webkit filter：contrast（）brightness（））的组合来进行较差的近似。

我希望能够用processing.js或pixastic之类的东西来实现这一点。

我不知道有哪个库能在不引入太多开销的情况下包含有效的直方图均衡方法。然而，您可以很快地将自己的实现组合在一起。

您可以从这个非常优化的直方图均衡算法开始，该算法适用于从基于反向投影的js-objectdetect获取的8位单通道图像：

/**
* Equalizes the histogram of an unsigned 1-channel image with values
* in range [0, 255]. Corresponds to the equalizeHist OpenCV function.
*
* @param {Array} src 1-channel source image
* @param {Array} [dst] 1-channel destination image. If omitted, the
* result is written to src (faster)
* @return {Array} Destination image
*/
equalizeHistogram = function(src, dst) {
    var srcLength = src.length;
    if (!dst) { dst = src; }
    // Compute histogram and histogram sum:
    var hist = new Float32Array(256);
    var sum = 0;
    for (var i = 0; i < srcLength; ++i) {
        ++hist[~~src[i]];
        ++sum;
    }
    // Compute integral histogram:
    var prev = hist[0];
    for (var i = 1; i < 256; ++i) {
        prev = hist[i] += prev;
    }
    // Equalize image:
    var norm = 255 / sum;
    for (var i = 0; i < srcLength; ++i) {
        dst[i] = hist[~~src[i]] * norm;
    }
    return dst;
}

您可以将此方法独立应用于RGB图像的各个通道，但这将产生不希望的结果。维基百科描述了一种更好的方法：

"但是，如果图像首先转换到另一个颜色空间，Lab颜色空间，特别是HSL/HSV颜色空间，然后算法可以应用于亮度或值通道，而不会导致图像的色调和饱和度的变化。"（维基百科）

然后您需要一个图像和一个画布元素：

context = canvas.getContext("2d");
context.drawImage(image, 0, 0, canvas.width, canvas.height);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
convertRGBAToHSL(imageData.data, hsl);
equalizeHistogram(hsl[2], hsl[2]);
convertHSLToRGBA(hsl, rgba);

如何执行RGBA<->这里描述了Javascript中的HSL对话。

请记住，使用参考转换方法的8位RGB图像有511个可能的亮度值。然后，直方图应该是一个511值的数组，而不是256值。您还必须确保您的亮度值在正确的范围内，可能通过乘以510或修改转换方法：

// r, g, b are in [0..255]
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var luminance = max + min;

据我所知，您不能直接在图像上执行此操作。你需要在画布上绘制你的图像，画布上有HTML5元素（一些画布教程），然后使用算法（我能找到的一种算法）分别处理每个像素的颜色，以执行对比度拉伸。

希望这能有所帮助！

相关文章：