Search code examples
imagecachingcanvasrefreshsrc

How to refresh image.src dataurl, prevent cache?

I have the following code that loads an image that I choose from files. It loads and draws it to a canvas, but if I make a change the the image file via an image editor, and then reload it- it doesn't refresh and show the changes(it uses the cached version)..

How can I get it to refresh??

    var reader = new FileReader();
    reader.onload = function(event){


        img[num] = new Image();

        img[num].onload = function () {

            //handle image stuff
        }
        img[num].src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
Solution

  • Sorry, was an issue with the input file change event. Since the filename wasn't different, it wasn't calling the change event

    If I add the line to clear the value, it works.

            $( "#imageReplacer" ).on("change", function( event ){ 
            replaceImage(event); 
            $(this).val('');
        }).hide();