使用 javascript 提高和降低 canvas 的亮度和對比度的性能改進

Question

我正在嘗試使用輸入范圍增加和減少 canvas 的亮度和對比度。 為此，我使用了以下代碼。

Html：

 <canvas id="canvas"></canvas>
 <input id="range" type="range" value="0" min="-100" max="100">

Javascript：

brightnessRange = document.getElementById('range');
brightnessRange?.addEventListener("input", function (e) {
    e.preventDefault();

    var img = new Image();
    img.src = 'http://webgl-workshop.com/assets/e826db271aa3c03c69c4aca1e20abf5b.jpg';

    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    let arr = imgData.data;

    for (var i = 0; i < arr.length; i += 4) {
        arr[i] = arr1[i] + 255 * (+brightnessRange.value / 100);
        arr[i + 1] = arr1[i + 1] + 255 * (+brightnessRange.value / 100);
        arr[i + 2] = arr1[i + 2] + 255 * (+brightnessRange.value / 100);
    }

    imgData.data = arr;
    ctx.putImageData(imgData, 0, 0);
}

我正在使用類似類型的代碼進行對比。 上面的代碼工作太慢了。 還有其他方法可以實現嗎？

請注意：我不想使用上下文過濾器，因為它在某些瀏覽器中不支持。

Answer 1

對於亮度，您可以使用這里描述的globalCompositeOperation ： HTML5 Canvas 亮度控制

至於對比，沒有過濾器，提高性能的唯一方法是將 WebGL 與 canvas 一起使用。