gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 01:00:34 28 4
gpt4 key购买 nike

每次使用 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 的清除缓存工具。我认为图像会在执行时加载并且每次都会加载图像,但似乎并非如此。

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

最佳答案

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

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

关于javascript - HTML5 Canvas 从浏览器缓存加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56118527/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com