Make Firefox refresh the image after changing img.src

Question

I modify some images on the canvas and then set the src of these images to the new base64 encoded images.

img.src = changeColor(img); 

changeColor returns a base64 encoded image:

 return canvas.toDataURL(); 

Chrome and Opera update images after changing src, but firefox doesn't! I also inspected the FireBug image element and it shows a new src and a new image!

I already tried adding Data to the URL, but uhh ... this is a base64 encoded image, not a URL, so it completely breaks my photos.

Is there a way to force image reloads or disable firefox cache via javascript?

UPDATE: I also tried setting image.src = ''; in the changeColor function. It works in chrome, but in firefox ... the picture disappears and does not appear again when I set a new base64 value.

Answer 1

It works for me as @dmmd. You only need to add a query string with a random value.

 id.src = "path?t=t"+ Math.random(5); 

Answer 2

I do not use image data, but it worked for a similar problem when FF did not restart, when the src variable did not change:

 image.src = ""; setTimeout(function(){ image.src = //the new image src }, 0); 

Answer 3

Try adding an image format (and use jpg). It can re-encode the image:

 return canvas.toDataURL('image/jpg');