HTML5 Canvas 从浏览器缓存加载图像

Question

我每次使用 HTML5 Canvas 时都会遇到这个问题：我上传了一张图片，使用以下代码将其绘制到 canvas 中：

canv = document.getElementById("gc");
canv.width = window.innerWidth;
canv.height = window.innerHeight;
centerX = canv.width / 2;
centerY = canv.height / 2;
ctx = canv.getContext("2d");

image= new Image;
image.src = "images/test.png";
image.onload = function() {
    setInterval(game, 1000 / 500);
};

一切正常，间隔调用一个函数，在 canvas 周围移动图像，控制台日志或任何内容都没有错误。

问题是，当我更改（更新）服务器上的文件 "test.png" 时，canvas 显示该文件的先前版本，直到我为 [=27 使用清除缓存工具=].我认为图像会在执行时加载，并且每次都会加载图像，但似乎没有。

如何修复它以使其加载实际图像文件？

Answer 1

'prevent' 缓存的一个肮脏的老把戏是向请求添加一个随机数。这样请求 - 虽然每次都是相同的图片 - 是不同的。

image= new Image();
image.src = "images/test.png?rnd="+Math.random();

Answer 2

您可以尝试添加像 image.src = "test.png?cache=" + Date.now() 这样的随机数，但更好的方法是使用 Cache-Control: no-cache header using XMLHttpRequest or fetch.

发送请求

"cache-busting" 使用 pseudo-random 查询字符串不好的原因是因为它实际上并没有像名字所暗示的那样。取而代之的是，它用多个冗余资源使浏览器的缓存变得杂乱无章，每个资源都有自己独特的查询字符串。这会浪费您的磁盘 space (and lifetime for SSDs)，因为您再也不想使用缓存的资源了。

HTML5 Canvas 从浏览器缓存加载图像

HTML5 Canvas loading images from browser cache

javascript

image

browser-cache

html5-canvas