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

【问题标题】：HTML5 Canvas loading images from browser cacheHTML5 Canvas 从浏览器缓存中加载图像
【发布时间】：2019-09-30 18:41:36
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript image html5-canvas browser-cache

【解决方案1】：

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

使用伪随机查询字符串的“cache-busting”不好的原因是它实际上并没有像名字所暗示的那样做。取而代之的是，它用几个冗余资源使浏览器的缓存变得混乱，每个资源都有自己独特的查询字符串。这会浪费您的磁盘空间 (and lifetime for SSDs)，因为您从不打算再次使用缓存的资源。

【讨论】：

【解决方案2】：

“防止”缓存的一个肮脏的旧技巧是在请求中添加一个随机数。这样，请求（尽管每次都是相同的图片）是不同的。

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

【讨论】：