4

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

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

我希望能够使用 processing.js 或 pixastic 之类的东西来完成此任务。

4

2 回答 2

5

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

您可以从这个非常优化的直方图均衡算法开始，该算法用于基于反投影从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);

此处描述了如何在 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;
于 2012-09-06T11:21:06.010 回答
0

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

不过，希望有所帮助！

于 2012-08-24T18:35:04.533 回答