Question

每次使用HTML5 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);
};

一切正常，时间间隔调用一个函数，可以在画布上移动图像，控制台日志中没有错误或其他任何错误。

问题在于，当我在服务器上更改（udpate）文件“ test.png”时，画布会显示该文件的先前版本，直到我对chrome使用清除缓存工具为止。我以为图像会在执行时加载，每次都会加载图像，但事实并非如此。

如何修复它才能加载实际的图像文件？

Answer 1

“防止”缓存的一个肮脏的老把戏是在请求中添加一个随机数。这样，尽管每次都是同一张图片，但请求是不同的。

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

Answer 2

您可以尝试添加image.src = "test.png?cache=" + Date.now()之类的随机数，尽管更好的方法是使用Cache-Control: no-cache或XMLHttpRequest发送带有fetch标头的请求。

使用伪随机查询字符串进行“高速缓存清除”的原因很糟糕，是因为它实际上并没有按照名称提示进行操作。取而代之的是，它会使浏览器的缓存中出现一些多余的资源，每个资源都有自己的唯一查询字符串。这会浪费磁盘空间（and lifetime for SSDs），因为您再也不想使用缓存的资源了。

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

2 个答案: