Сменить фильтр на изображение

Question

Я пытаюсь добавить фильтр к изображению. Пользователи могут загружать файл с помощью обычного ввода = файла. Скрипт JQ показывает 2 изображения. предварительный просмотр и один с фильтром на нем.

Теперь, когда я выбираю фильтр, все хорошо. Но когда я хочу изменить фильтр, старый возвращается, или стек фильтров, и изображения, потому что 1 большое размытие.

Есть ли способ сбросить изображение и добавить к нему новый фильтр?

Это код фильтра я использовал: link

Вот мой код:

<form id="form1" runat="server"> 
    <input type="text" name="title" id="title" placeholder="title" formenctype="multipart/form-data" /><br /><br /> 

    <input type='file' id="imgInp" /><br /><br /> 

    <select name="filter" id="filter"><br /><br /> 
     <option value="Original">Original</option> 
     <option value="1977">1977</option> 
     <option value="Brannan">Brannan</option> 
     <option value="Gotham">Gotham</option> 
     <option value="Hefe">Hefe</option> 
     <option value="Inkwell">Inkwell</option> 
     <option value="Kelvin">Lord Kelvin</option> 
     <option value="Nashville">Nashville</option> 
     <option value="PRO">X-PRO II</option> 
    </select><br /><br /> 
    <img id="blah" src="#" alt="your image" class="filter"/> 
    <img id="preview" src="#" alt="your image" class="filter"/> 
</form> 

И мой сценарий:

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      jQuery('#blah').attr('src', e.target.result); 
      jQuery('#preview').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

jQuery("#imgInp").change(function(){ 
    readURL(this); 
}); 

jQuery("#filter").change(function() 
{ 
    var filterName = jQuery('#filter').find(":selected").text(); 
    var src = jQuery('#preview').attr('src');  

    jQuery("#blah").attr("src", src);  

    jQuery("#blah").attr("data-filter", filterName); 
    jQuery('.filter').filterMe(); 

}); 

Answer 1

При восстановлении исходного изображения, вам нужно удалите также сохраненный объект data.

jQuery("#blah").removeData(); 

Демо-версия jsfiddle here.