Question

在阅读此帖this post后，我正在使用Canvas玩一些图像过滤器。基本上，它会移动所有像素并将值更新为某些内容。

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

显然这会使页面变慢，因为当用户将滑块从10移动到40时，它会调用该功能30次！我尝试使用这样的标志：

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

但那不完全是我想要的，因为我想在＆＃34;实时＆＃34; （比如在photoshop中）

任何人都可以给我一个提示来解决这个问题吗？可能是，我应该使用另一个事件，或者可能采用完全不同的方法来处理imageData。

Answer 1

可能效果不如预期，但尝试添加超时

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

            myFlag = false;
        }, 1);
    }
}

Answer 2

如果你想“实时”看到它，你需要在滑块更新其值时调用该函数。

唯一的另一种方法是使用 apply 按钮转换滑块已设置的图像（或超时）。

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

2 个答案: