Html5 canvas HTML5画布上的Gamma调整？

我找到了一种增加伽马的方法，但没有办法减少它！说明增加伽马值的公式。该公式适用于增加gamma，但不适用于减少，即使我在画布的新实例上应用了减少。我尝试重新绘制画布，并使用负值进行gamma计算，但我无法恢复原始画布

//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 = ...

---

第一部分工作。第二个没有。

没有负伽马校正。您应该保存原始值并在进行gamma更改时使用它们，并将gamma设置为

1.0

以恢复到原始值

还要注意，您的操作顺序错误（指数在乘法之前）

---

没有负伽马校正。您应该保存原始值并在进行gamma更改时使用它们，并将gamma设置为

1.0

以恢复到原始值

还要注意，您的操作顺序错误（指数在乘法之前）

---

gamma没有负值。理想情况下，该值将介于

0.01

和

7.99

之间。因此，通过使用图像的原始值创建一个新的画布实例，然后实例化它，或者使用原始图像创建一个像素池，然后还原回原始值，应该可以将gamma还原回原始值

我写了一个脚本，我将如何构造伽马归约算法

var伽马=0.5；
var伽马校正=1/伽马；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var imageData=ctx.getImageData（0.0，canvas.width，canvas.height）；
函数GetPixelColor（x，y）{
var index=parseInt（x+canvas.width*y）*4；
变量rgb={
r:imageData.data[索引+0]，
g:imageData.data[索引+1]，
b:imageData.data[索引+2]
};
返回rgb；
}
函数SetPixelColor（x、y、颜色）{
var index=parseInt（x+this.width*y）*4；
var数据=imageData.data；
数据[索引+0]=color.r；
数据[索引+1]=color.g；
数据[索引+2]=颜色b；
};
对于（y=0；y

我不知道应用程序应该如何调整gamma值，但我想它是通过值调整器完成的。如果是这样，则应动态调整gamma值，给出最小和最大范围。我没有测试代码，这不是我的工作范围，但我的想法很清楚

编辑： 为了理解伽马校正的原理，我们先来定义伽马

Gamma是改变像素输入的监视器。Gamma校正是将该过程反转为线性RGB值的行为，以便最终输出保持线性。例如，如果计算对象的灯光强度为0.5，则在像素中不会将结果存储为0.5。将其存储为

pow（0.5,1.0/2.2）=0.73

。当您将0.73发送到监视器时，它将对该值应用伽马射线，并产生

pow（0.73，2.2）=0.5

，这正是您想要的。要执行此操作，请应用反gamma函数

o=pow（i，1.0/伽马）

在哪里

o

是输出值

i

是输入值

gamma

是监视器使用的gamma值

所以伽马校正就是输入值上升到伽马倒数的幂。因此，要将gamma恢复为原始值，请在应用gamma校正之前应用公式

---

蓝线表示在将像素发送到监视器之前需要应用于像素的反伽马曲线。当监视器将其伽马曲线（红线）应用于像素时，结果是一条线性线（绿线），表示预期的RGB像素值

伽马没有负值。理想情况下，该值将介于

0.01

和

7.99

之间。因此，通过使用图像的原始值创建一个新的画布实例，然后实例化它，或者使用原始图像创建一个像素池，然后还原回原始值，应该可以将gamma还原回原始值

我写了一个脚本，我将如何构造伽马归约算法

var伽马=0.5；
var伽马校正=1/伽马；
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var imageData=ctx.getImageData（0.0，canvas.width，canvas.height）；
函数GetPixelColor（x，y）{
var index=parseInt（x+canvas.width*y）*4；
变量rgb={
r:imageData.data[索引+0]，
g:imageData.data[索引+1]，
b:imageData.data[索引+2]
};
返回rgb；
}
函数SetPixelColor（x、y、颜色）{
var index=parseInt（x+this.width*y）*4；
var数据=imageData.data；
数据[索引+0]=color.r；
数据[索引+1]=color.g；
数据[索引+2]=颜色b；
};
对于（y=0；y

我不知道应用程序是如何运行的

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 = ...

async function adjustGamma(gamma) {
    const gammaCorrection = 1 / gamma;
    const canvas = document.getElementById('canvasOutput');
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0.0, 0.0, canvas.width, canvas.height);
    const data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        data[i] = 255 * Math.pow((data[i] / 255), gammaCorrection);
        data[i+1] = 255 * Math.pow((data[i+1] / 255), gammaCorrection);
        data[i+2] = 255 * Math.pow((data[i+2] / 255), gammaCorrection);
    }
    ctx.putImageData(imageData, 0, 0);
}