javascript - 使用 Canvas 和范围输入事件的动态图像过滤器

阅读这篇this post之后，我正在使用Canvas来处理一些图像过滤器。基本上，它会遍历所有像素并将值更新为某种值。

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

显然，这会使页面放慢很多，因为当用户将滑块从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);
    }
}

关于javascript - 使用 Canvas 和范围输入事件的动态图像过滤器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7734303/