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

【问题标题】：Adjust Image Lightning/Shadows using jQuery使用 jQuery 调整图像闪电/阴影
【发布时间】：2013-05-16 09:33:42
【问题描述】：

我想在 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 改变图像的不透明度来管理。这些相同吗？

【问题讨论】：

Pixastic 演示对您有用吗？在最新的 Opera (v12.15) 中它的效果精确为零
更正-我错了-您必须在调整滑块后单击“变亮”按钮。它工作正常 - 只是不是一个好的演示。
@Beetroot-Beetroot Pixastic 演示在他的网站上不起作用，但我下载了 js 文件并写下它的代码，然后它只是添加了值。我在 chrome 和 mozila 上试过了
@Beetroot-Beetroot Demo 不工作我认为在发布者网站上。滑块不工作
Abdul，同意，这东西不能正常工作。我们不得不怀疑它是“Lighten”代码本身，而不仅仅是演示。您需要寻找更好的插件。

标签： jquery image shadow

【解决方案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);
        });
    }

【讨论】：