Question

我正在尝试为图片添加过滤器。人们可以使用常规input = file上传文件。 JQ脚本显示2个图像。预览和带有过滤器的预览。

现在，当我选择过滤器时，一切都很好。但是，当我想要更改过滤器时，旧的过滤器会不断回来，或者过滤器堆叠和图像因为一个大的模糊。

有没有办法重置图像并为其添加新过滤器？

这是我使用的过滤器代码：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。

更改图像上的过滤器

1 个答案: