使用画布和范围输入事件的动态图像过滤器

Dynamic Image filter using canvas and range input event

本文关键字：入事件 动态 图像 过滤器 输入 范围      更新时间：2023-09-26

在阅读完这篇文章后，我正在使用画布使用一些图像过滤器。基本上，它遍历所有像素并更新值。

我现在要做的是使用输入范围来调整图像的亮度。
因此，我附加了一个onChange事件处理程序，并在用户每次移动滑块时调用该函数来更新画布。

显然，这会大大降低页面速度，因为当用户将滑块从10移动到40时，它调用该函数30次!我尝试使用这样的标志:

if (!myFlag) {
 myFlag = true;
 ...call the function...
 myFlag = false;
}

但这并不是我想要的，因为我想要"实时"看到它(像在photoshop中)

谁能给我一个提示来解决这个问题?也许，我应该使用另一个事件，或者使用完全不同的方法来处理imageData。

可能不会像你期望的那样好，但尝试添加超时

var myFlag = false;
var filterTimeout;
slider.onChange = function() {
    if (!myFlag) {
        myFlag = true;
        clearTimeout(filterTimeout);
        filterTimeout = setTimeout(function() {
            // apply the filter hear
            myFlag = false;
        }, 1);
    }
}

如果你想实时看到它，你需要在滑动条更新它的值时调用这个函数。

唯一的另一种方法是有一个apply按钮，该按钮在滑动条设置(或超时)时转换图像。

相关文章：