在图像上更改过滤器

我正在尝试向图像添加过滤器。人们可以使用常规输入=文件上传文件。 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(); 

});

来源

2015-01-14 Taacoo

当你恢复原始图像，您需要删除存储的data对象。

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

演示jsfiddle here。

来源

2015-01-14 15:34:37 zord

在图像上更改过滤器

回答

相关问题