javascript - 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 会显示该文件的先前版本，直到我使用 Chrome 的清除缓存工具。我认为图像会在执行时加载并且每次都会加载图像，但似乎并非如此。

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

Answer 1

您可以尝试添加一个随机数，例如 image.src = "test.png?cache="+ Date.now()，不过更好的方法是发送带有 Cache-Control: no-cache header 的请求使用 XMLHttpRequest 或 fetch 。

使用伪随机查询字符串的“缓存清除”不好的原因是它实际上并没有按照名称所暗示的那样做。相反，它会用多个冗余资源扰乱浏览器的缓存，每个资源都有自己独特的查询字符串。这会浪费您的磁盘空间(and lifetime for SSDs)，因为您永远不会再次使用缓存的资源。