如何执行浏览器内对比扩展/规范化?

I have jpegs on a webpage. I would like to perform client-side equalization (contrast stretching) on these images without browser plugins. I would also accept a solution for histogram equalization.

我在网页上有jpeg。我想在这些图像上执行客户端均衡(对比扩展)，而不使用浏览器插件。我也会接受直方图均衡化的一个解决方案。

I currently use a poor approximation with a combination of two CSS filters (-webkit-filter: contrast() brightness()).

我目前使用的是一个很差的近似，它结合了两个CSS过滤器(-webkit-filter: contrast() bright()))。

I am hoping to be able to accomplish this with something like processing.js or pixastic.

我希望能够通过处理之类的东西来实现这一点。js或pixastic。

2 个解决方案

#1

I do not know of a library that contains an efficient histogram equalization method without introducing too much overhead. However, you could lump together your own implementation pretty fast.

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

You could start with this very optimized histogram equalization algorithm for 8-bit single channel images taken from js-objectdetect based on back-projection:

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

You could apply this method to the individual channels of an RGB image independently, but this will produce undesired results. Wikipedia describes a better method:

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

"However, if the image is first converted to another color space, Lab color space, or HSL/HSV color space in particular, then the algorithm can be applied to the luminance or value channel without resulting in changes to the hue and saturation of the image." (Wikipedia)

“但是，如果首先将图像转换为另一个颜色空间、实验室颜色空间或HSL/HSV颜色空间，那么该算法可以应用于亮度或值通道，而不会导致图像的色调和饱和度发生变化。”(维基百科)

You then need an image and a canvas element:

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

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

How to perform RGBA <-> HSL conversation in Javascript is described here.

如何在Javascript中执行RGBA <-> HSL对话。

Keep in mind that there are 511 possible luminance values for an 8-bit RGB image using the referenced conversion method. Your histogram should then be an array of 511 instead of 256 values. You also would have to make sure that your luminance values are in the correct range, possibly by multiplying with 510 or by modifying the conversion method:

请记住，使用引用转换方法对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;

2 个解决方案

#1

更多相关文章

随机推荐