使用 javascript 提高和降低画布亮度和对比度的性能改进答案

【问题标题】：Performance improvement for increasing and decreasing brightness and contrast of canvas using javascript使用 javascript 提高和降低画布亮度和对比度的性能改进
【发布时间】：2021-07-02 21:13:13
【问题描述】：

我正在尝试使用输入范围来增加和减少画布的亮度和对比度。为此，我使用了以下代码。

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

我使用类似类型的代码进行对比。上面的代码工作太慢了。有没有其他方法可以实现？

请注意：我不想使用上下文过滤器，因为它在某些浏览器中不支持。

【问题讨论】：

只加载一次图像，如果您要对原始 ImageData 进行大量操作，请处理该 ImageData 的副本并将原始图像保存在内存中，不要尝试从中检索它每次的上下文。剥夺每个人使用正确工具的权利，因为少数人不能使用是一个坏主意。让它在可能的地方正确，并且只为 Safari 添加性能较低的 polyfill。

标签： javascript html performance canvas

【解决方案1】：

对于亮度，您可以使用globalCompositeOperation，如下所述：HTML5 Canvas brightness control

至于对比，没有过滤器，提高性能的唯一方法是使用带有画布的 WebGL。

【讨论】：