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

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图像的各个通道,但这会产生不希望的结果.Wikipedia描述了一种更好的方法:

"但是,如果首先将图像转换为另一个颜色空间,Lab颜色空间或特别是HSL/HSV颜色空间,则可以将算法应用于亮度或值通道,而不会导致色调和饱和度的变化.图片." (维基百科)

然后,您需要一个图像和一个canvas元素:

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);

如何在Javascript中执行RGBA < - > 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;