CODEWITHSUNDEEP
jquery
Taacoo
Taacoo

Reputation: 287

Change filter on image

I'm trying to add a filter to an image. People can upload the file with a regular input=file. A JQ script shows 2 images. the preview and the one with the filter on it.

Now when i choose a filter all is good. But when i want to change the filter the old one keeps coming back or the filters stack and the images because 1 big blur.

Is there a way to reset the image and add a new filter to it?

This is the filter code i used: link

Here is my code: 

<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>

And my script:

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

});

Upvotes: 0

Views: 356

Answers (1)

zord
zord

Reputation: 4783

When you restore the original image, you need to remove the stored data object too.

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

Demo jsfiddle here.

Upvotes: 2

Related Questions