Javascript 应用多个过滤器时滑块中的GLFX插件延迟
我想对多个过滤器使用多个Javascript 应用多个过滤器时滑块中的GLFX插件延迟,javascript,jquery,jquery-ui,jquery-slider,Javascript,Jquery,Jquery Ui,Jquery Slider,我想对多个过滤器使用多个Jquery滑块,“亮度/对比度”、“去噪”、“三角形模糊” 但是,当幻灯片启动时,应用过滤器会延迟(约1s) 这是我的代码: window.onload = function () { var canvas = fx.canvas(); var image = document.getElementById('image'); var texture = canvas.texture(image); $('#image').replaceWith(canvas) ca
Jquery滑块,“亮度/对比度”、“去噪”、“三角形模糊”
但是,当幻灯片启动时,应用过滤器会延迟(约1s)
这是我的代码:
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"));
};