Question

我想对多个过滤器使用多个Jquery slider，“亮度/对比度”，“去噪”，“三角模糊”。

但是当幻灯片被触发时，应用过滤器会有延迟（约1秒）。

这是我的代码：

window.onload = function () {
var canvas = fx.canvas();
var image = document.getElementById('image');
var texture = canvas.texture(image);
$('#image').replaceWith(canvas)
canvas.draw(texture).triangleBlur(0).update();
canvas.draw(texture).denoise(50).update();
texture.destroy();
texture = canvas.contents();
$("#SliderTriangleBlur").slider({
    range: "min",
    min: 0,
    max: 200,
    value: 0,
    slide: function (event, ui) {
       $("#AmountTriangleBlur").val(ui.value);
       var dNoise = $("#SliderDenoise").slider("option", "value");
       var Brightness = $("#SliderBrightness").slider("option", "value");
       var Contrast = $("#SliderContrast").slider("option", "value");
       canvas.draw(texture).denoise(dNoise).brightnessContrast(Brightness, Contrast).triangleBlur(ui.value);
       canvas.update();
    }
});
$("#AmountTriangleBlur").val($("#SliderTriangleBlur").slider("value"));
$("#SliderDenoise").slider({
    range: "min",
    min: 0,
    max: 50,
    value: 50,
    slide: function (event, ui) {
        $("#AmountDenoise").val(ui.value);
        var triBlur = $("#SliderTriangleBlur").slider("option", "value");
        var Brightness = $("#SliderBrightness").slider("option", "value");
        var Contrast = $("#SliderContrast").slider("option", "value");
        canvas.draw(texture).triangleBlur(triBlur).brightnessContrast(Brightness, Contrast).denoise(ui.value);
        canvas.update();
    }
});
$("#AmountDenoise").val($("#SliderDenoise").slider("value"));

$("#SliderBrightness").slider({
    range: "min",
    min: -1,
    max: 1,
    step: 0.01,
    value: 0,
    slide: function (event, ui) {
        $("#AmountBrightness").val(ui.value);
        var triBlur = $("#SliderTriangleBlur").slider("option", "value");
        var dNoise = $("#SliderDenoise").slider("option", "value");
        var Contrast = $("#SliderContrast").slider("option", "value");
canvas.draw(texture).triangleBlur(triBlur).denoise(dNoise).brightnessContrast(ui.value, Contrast);
        canvas.update();
    }
});
$("#AmountBrightness").val($("#SliderBrightness").slider("value"));

$("#SliderContrast").slider({
    range: "min",
    min: -1,
    max: 1,
    step: 0.01,
    value: 0,
    slide: function (event, ui) {
        $("#AmountContrast").val(ui.value);
        var triBlur = $("#SliderTriangleBlur").slider("option", "value");
        var dNoise = $("#SliderDenoise").slider("option", "value");
        var Brightness = $("#SliderBrightness").slider("option", "value");
        canvas.draw(texture).triangleBlur(triBlur).denoise(dNoise).brightnessContrast(Brightness, ui.value);
        canvas.update();
    }
});
$("#AmountContrast").val($("#SliderContrast").slider("value"));
};

应用多个过滤器时，滑块中的GLFX插件延迟

0 个答案: