使用滑塊和Pixastic庫進行圖像編輯

Question

我試圖編輯圖像使用Pixastic js library，以便在用戶移動JqueryUI滑塊時圖像自動模糊爲某個值。我已經得到了這個使用滑塊使用此CoffeeScript的調整不透明度值CSS圖像的工作：

#This works 
$('.sliderop').slider 
    min: 0 
    max: 1 
    value: 1 
    step: 0.01 
    range: "min" 
    slide: (event, ui) -> 
     $("#img_16").css('opacity', ui.value) 

但是，當我嘗試使用Pixastic庫，沒有骰子做的基本上是同樣的事情：

#This doesn't 
$('.sliderbl').slider 
    min: 0 
    max: 5 
    value: 0.5 
    step: 0.1 
    range: "min" 
    slide: (event, ui) -> 
     Pixastic.process($("#img_16"), "blurfast", { amount: ui.value}) 

這段代碼的奇怪之處在於它會「凍結」滑塊 - 當我加載頁面時，滑塊停留在默認值「0.5」並且無法移動（但是如果我註釋掉代碼Pixastic.process($("#img_16"), "blurfast", { amount: ui.value})，它再次正常運行）。

這是我的代碼問題還是我使用Pixastic庫的方式？

Answer 1

因爲您正在使用jQuery版本的Pixastic庫。如果你下載沒有jquery插件的Pixastic庫，那麼以前的代碼應該可以正常工作。

Answer 2

好吧，我找到了答案的另一個問題Pixastic Blur not working - variable issue?

代碼工作時更改爲：

$('.sliderbl').slider 
    min: 0 
    max: 5 
    value: 0.5 
    step: 0.1 
    range: "min" 
    slide: (event, ui) -> 
     $("#img_16").pixastic("blurfast", {amount:ui.value}) 

不過，我很好奇，爲什麼這個工作和其他代碼不會。在另一個頁面上（不是用這種方式使用滑塊）Pixastic的調用工作正常。