使用 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 一起使用。