Question

我想使用jquery中的滑块调整图像lighnting（高亮）/阴影（darkness）？我已经尝试Pixastic，但它没有正常工作。当我改变滑块值时，它只是增加了价值。更改滑块值时，不会恢复原始图像。

还有其他jquery教程吗？

这是我用Pixastic尝试过的代码。

<img id="image" src="pool.png" alt="your_image" />
<label for="blue">Highlight</label><input type="range" id="lighten_range" step=".05" min="-1" max="1" value="0" />

jQuery('#lighten_range').change(function(){

        var img = document.getElementById ('image');

        var lighten_val = parseFloat(jQuery('#lighten_range').val());
        Pixastic.process(img, "lighten", {amount:lighten_val});
    });

任何人都可以告诉我图像higlight / shadow可以通过使用css改变图像的不透明度来管理。这些是否相同？

Answer 1

对于正在尝试构建用于编辑照片的滑块工具的其他人。

单个滑块id的HTML示例定义方法并命名属性：

<label>Sharpen</label>
<input id="sharpen" name="amount" type="range" value="0" min="0" max="50" onchange="pe_Edit()"><br>
<br><br><hr><br>
<img src="myimg.jpg" id="pe_photo">

JS：

        function pe_Edit() {
        //define photo id
        var id = '#pe_photo';
        var src = $(id).attr('src');
        Pixastic.revert(document.getElementById('pe_photo'));

        $( "input" ).each(function( index ) {
            var value = $(this).val()/100;
            var action = $(this).attr('id');
            var effect = $(this).attr('name');
            var pix_cmd = jQuery.parseJSON( '{ "'+effect+'":"'+value+'" }' );
            $(id).pixastic(action, pix_cmd);
        });
    }

使用jQuery调整图像闪电/阴影

1 个答案: