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

debugcn 发表于 Dev

111

亚历杭德罗·康帕

每次使用 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 的清除缓存工具为止。我认为图像会在执行时加载，每次都会加载图像，但似乎没有。

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

帕特里克·罗伯茨

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

使用伪随机查询字符串的“缓存破坏”之所以不好，是因为它实际上并没有按照名称所暗示的那样做。取而代之的是，它用几个冗余资源来混淆浏览器的缓存，每个资源都有自己独特的查询字符串。这会浪费您的磁盘空间（以及 SSD 的生命周期），因为您再也不想使用缓存的资源。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。