使用滑块和 Pixastic 库进行图像编辑答案

【问题标题】：Image editing with a slider and Pixastic library使用滑块和 Pixastic 库进行图像编辑
【发布时间】：2012-11-02 03:27:30
【问题描述】：

我正在尝试使用Pixastic js library 编辑图像，以便当用户移动 JqueryUI 滑块时图像会自动模糊到某个值。我已经使用滑块来使用此咖啡脚本调整图像的不透明度 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”并且无法移动（但如果我注释掉 @ 987654324@码，又正常移动了）。

这是我的代码问题还是我使用 Pixastic 库的方式有问题？

【问题讨论】：

标签： javascript jquery-ui coffeescript pixastic

【解决方案1】：

因为您使用的是 jquery 版本的 Pixastic 库。如果您下载没有 jquery 插件的 Pixastic 库，那么前面的代码应该可以正常工作。

【讨论】：

【解决方案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 调用工作正常。

【讨论】：