Настройка изображения Lightning/Shadows с помощью jQuery

Question

Я хочу настроить изображение lighnting (выделить)/shadow (darkness) с помощью слайдера в 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}); 
    }); 

Может ли один скажите мне higlight изображения/тень можно управлять с изменением непрозрачности изображения, используя css.Are эти же?

Answer 1

Для всех, кто пытается создать слайдер-инструмент для редактирования фотографий.

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); 
     }); 
    }