javascript - 在 img.src 更改后强制 firefox 重新加载图像

Question

我正在修改画布上的一些图像，然后将这些图像的 src 设置为新的 base64 编码图片。

img.src = changeColor(img);

changeColor 返回 base64 编码的图像：

return canvas.toDataURL();

Chrome 和 Opera 会在 src 更改后刷新图像，但 firefox 不会！我还通过 FireBug 检查了图像元素，它显示了新的 src 和新的图像！

我已经尝试将数据添加到 URL 但呃......这是一个 base64 编码的图像，而不是一个 url，所以它完全破坏了我的图片。

我有什么方法可以通过 javascript 强制重新加载图像或禁用 firefox 缓存？

更新：我也尝试设置 image.src=''; 在 changeColor 函数中。它适用于 chrome，但在 Firefox 中...图片消失，并且在我设置新的 base64 值时不再出现。

score 1 · Accepted Answer

我没有使用图像数据，但这适用于当 src 变量未更改时 FF 未重新加载的类似问题：

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

score 1 · Accepted Answer

正如@dmmd 提到的那样，它对我有用。您只需要添加具有随机值的查询字符串。

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

score 0 · Accepted Answer

尝试添加图像格式（并使用 jpg）。它可能会重新编码图像：

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

3 回答 3