4

Webページにjpegがあります。ブラウザプラグインを使用せずに、これらの画像に対してクライアント側のイコライゼーション（コントラストストレッチ）を実行したいと思います。ヒストグラム均等化のソリューションも受け入れます。

私は現在、2つの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 の可能な輝度値があることに注意してください。ヒストグラムは、256 個の値ではなく 511 個の配列になるはずです。また、おそらく 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要素(いくつかのキャンバスチュートリアル)であるキャンバスに画像を描画し、アルゴリズム(私が見つけることができる1つのアルゴリズム)を使用して、コントラストストレッチを実行するために各ピクセルの色を個別に操作する必要があります。

しかし、それが役に立ったことを願っています!

于 2012-08-24T18:35:04.533 に答える