HTML5 Canvas 上的伽玛调整？

Question

我找到了增加伽马的方法，但没有办法减少它！本文阐述了增加伽马值的公式。该公式适用于增加伽马值，但不适用于减少伽马值，即使我将减少值应用到画布的新实例上也是如此。我尝试重新绘制画布并使用负值进行伽玛计算，但我没有找回原来的画布。

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

第一部分有效。第二个没有。

Answer 1

为了完整起见，这是一段工作代码

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

此处，该函数根据 ID 为“canvasOutput”的 Canvas 上 OP 链接的文章中的公式调整伽玛值