0

我想在 jquery 中使用滑块调整图像光照（高光）/阴影（暗度）？我已经尝试过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});
    });

谁能告诉我图像高光/阴影可以通过使用 css 改变图像的不透明度来管理。这些相同吗？

4

1 回答 1

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);
        });
    }
于 2014-02-03T18:52:04.943 回答