0

ガンマを上げる方法を見つけましたが、減らす方法はありません！この記事では、ガンマを増やすための式について説明します。この式は、キャンバスの新しいインスタンスに縮小を適用した場合でも、ガンマを増加させるためには機能しますが、減少させるためには機能しません。キャンバスを再描画し、ガンマ計算に負の値を使用しようとしましたが、元のキャンバスを取り戻すことができません。

//For increasing, I tried
gamma = 0.5;
gammacorrection = 1/gamma;
r = Math.pow(255 * (r / 255), gammacorrection);
g = ...
b = ...

//For decreasing
gamma = -0.5;
gammacorrection = 1/gamma;
r = Math.pow(255 * (r / 255), gammacorrection);
g = ...
b = ...

最初の部分は機能します。2番目はしません。

4

3 に答える 3

4

負のガンマ補正はありません。元の値を保存して、ガンマを変更するときに使用し、ガンマを に設定し1.0て元に戻す必要があります。

また、演算の順序が間違っていることに注意してください (指数は乗算の前に来ます)。

var originals = { r: r, g: g, b: b };

// increase
gamma = 0.5;
gammacorrection = 1/gamma;
r = 255 * Math.pow(( originals.r / 255), gammacorrection);
g = ...
b = ...

// revert to original
gamma = 1;
gammacorrection = 1/gamma;
r = 255 * Math.pow(( originals.r / 255), gammacorrection);
g = ...
b = ...
于 2012-12-23T15:41:56.880 に答える
0

ガンマには負の値はありません。理想的には、この値はとの間の範囲に0.01なり7.99ます。したがって、ガンマを元の値に戻すには、画像の元の値を使用して新しいキャンバスインスタンスを作成してからインスタンス化するか、元の画像を使用してピクセルのプールを作成して元に戻すことができます。

ガンマリダクションのアルゴリズムをどのように構築するかというスクリプトを書きました。

var gamma = 0.5;
var gammaCorrection = 1 / gamma;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0.0, canvas.width, canvas.height);   

function GetPixelColor(x, y) {   
    var index = parseInt(x + canvas.width * y) * 4;
    var rgb = {
        r : imageData.data[index + 0],
        g : imageData.data[index + 1],
        b : imageData.data[index + 2]
    };

    return rgb;
}

function SetPixelColor(x, y, color) {
    var index = parseInt(x + this.width * y) * 4;
    var data = imageData.data;

    data[index+0] = color.r;
    data[index+1] = color.g;
    data[index+2] = color.b;
};


for (y = 0; y < canvas.height; y++) {
     for (x = 0; x < canvas.width; x++) {
         var color = GetPixelColor(x, y)
         var newRed   = Math.pow(255 * (color.r / 255), gammaCorrection);
         var newGreen = Math.pow(255 * (color.g / 255), gammaCorrection);
         var newBlue  = Math.pow(255 * (color.b / 255), gammaCorrection);

         var color = {
             r: newRed,
             g: newGreen,
             b: newBlue
         }

         SetPixelColor(x, y, color);
     }
}

アプリケーションがガンマ値をどのように調整する必要があるかはわかりませんが、値アジャスターを使用して調整されていると思います。その場合は、最小範囲と最大範囲を指定してガンマ値を動的に調整する必要があります。私はコードをテストしませんでした、これは私の範囲ではありませんでしたが、アイデアはうまくいけば明確です。

編集： 最初にガンマ補正の原理を理解するには、代わりにガンマを定義する方法を説明します。

ガンマは、ピクセル入力を変更するモニターの特殊性です。ガンマ補正は、線形RGB値のプロセスを反転して、最終出力が線形のままになるようにする行為です。たとえば、オブジェクトの光強度が0.5であると計算した場合、結果を0.5としてピクセルに保存しません。として保存しpow(0.5, 1.0/2.2) = 0.73ます。モニターに0.73を送信すると、値にガンマが適用され、必要な値が生成されpow(0.73, 2.2) = 0.5ます。これを行うには、逆ガンマ関数を適用します。

o=pow(i, 1.0/gamma)

どこ

oは出力値です。

i入力値です。

gammaモニターで使用されるガンマ値です。

したがって、ガンマ補正は、入力値のガンマの逆乗への上昇に他なりません。したがって、ガンマを元の値に戻すには、ガンマ補正が適用される前に数式を適用します。

ここに画像の説明を入力してください ここに画像の説明を入力してください

青い線は、ピクセルがモニターに送信される前にピクセルに適用する必要がある逆ガンマ曲線を表しています。モニターがガンマ曲線（赤い線）をピクセルに適用すると、結果は目的のRGBピクセル値を表す線形線（緑の線）になります。

于 2012-12-23T16:42:05.517 に答える