CODEWITHSUNDEEP
javascriptjqueryhtmlimage
gubbfett
gubbfett

Reputation: 2177

Refresh image element after altering src with base64

I'm using jquery cropbox for a little project. First the <img> is a default image, then i do a upload and FileReader for changing the image to a locally stored image.

like this

$('#selectfiledialog').change(function(evt){
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            $('#the_image').attr('src', fr.result);
        }
        fr.readAsDataURL(files[0]);
    }
});

However, when i will start the croping function on this image, it has the old values of the default image here, a 500x500 image.

So, when I will do the croping it has not got the new specs.

How can i now refresh that img element based on the new src? "add '?' + Math.random();" or date string is the only thing I've found but the new url is base64 encoded so that will not work.

Any ideas?

Upvotes: 3

Views: 2665

Answers (1)

user5066707
user5066707

Reputation:

1 . Create a container for the image before all;

2 . Delete the image and add another image in the container you created.

Note: If you do this you will lost references to the element of the image because it'll be removed. Avoid making continued references to the image, var img = $('#the_image'), i.e.

Your HTML should be similiar to:

<div id="img_container">

    <img id="the_image" src=""/>

</div>

Change the script line:

$('#the_image').attr('src', fr.result);

to:

$('#the_image').remove();

$('img_container')append('<img id="the_image" src="' + fr.result + '"/>');

Upvotes: 1

Related Questions