Question

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

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

我希望能够通过像processing.js或pixastic这样的东西来实现这一目标。

Answer 1

我不知道包含有效直方图均衡方法的库而不会引入太多开销。但是，您可以非常快速地将自己的实现混为一谈。

你可以从这个非常优化的直方图均衡算法开始，针对基于反投影的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图像的各个通道，但这会产生不希望的结果。维基百科描述了一种更好的方法：

“但是，如果图像首先转换为另一个色彩空间，请执行颜色空间，或特别是HSL / HSV颜色空间，然后是算法可以应用于亮度或值通道而不会导致更改图像的色调和饱和度。“（Wikipedia）

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

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＆lt; - ＆gt; Javascript中的HSL会话描述为here。

请注意，使用引用的转换方法，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;

Answer 2

据我所知，你不能直接在图像上这样做。您需要在canvas上绘制图像，HTML5元素（some canvas tutorials），然后使用算法（one algorithm I could find）分别处理每个像素的颜色，以便执行对比拉伸。

希望这有所帮助！

如何进行浏览器内对比度拉伸/标准化？

2 个答案: