Force firefox to reload image after img.src change

Question

I'm modifying some images on canvas and then setting src of this images to new base64 coded pictures.

img.src = changeColor(img);

changeColor returns base64 coded image:

return canvas.toDataURL();

Chrome and Opera are refreshing images after src change, but firefox don't! I also inspected the image element by FireBug, and it shows new src and new image!

I have already tried to add Data to URL but uhh... this is a base64 coded image, not an url, so it breaks my pictures totally.

I there any way to force reload images or disable firefox cache via javascript?

UPDATE: I have also tried to set image.src=''; in changeColor function. It works in chrome, but in firefox... picture disappear, and do not appear again when i set new base64 value.

Answer 1

It's working for me as @dmmd mentioned. You only need to add query string with a random value.

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

Answer 2

I am not using image data, but this worked for a similar issue where FF was not reloading when the src variable didn't change:

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