从浏览器缓存加载图像的HTML5画布
从浏览器缓存加载图像的HTML5画布
提问于 2019-05-14 03:10:04
每次使用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);
};一切都很好，interval调用了一个在画布上移动图像的函数，控制台日志或其他任何东西都没有错误。
问题是，当我在服务器上更改(更新)文件"test.png“时，画布会显示该文件的前一个版本，直到我使用chrome的清除缓存工具。我以为图像会在执行时加载，每次都会加载图像，但似乎并非如此。
我如何修复它，使其加载实际的图像文件？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-14 03:21:34
您可以尝试添加一个像image.src = "test.png?cache=" + Date.now()这样的现时值，不过更好的方法是使用XMLHttpRequest或fetch发送带有Cache-Control: no-cache头的请求。
使用伪随机查询字符串的“缓存破坏”是不好的，因为它实际上并没有像名字所暗示的那样做。相反，它会用几个冗余的资源弄乱浏览器的缓存，每个资源都有自己唯一的查询字符串。这会浪费您的磁盘空间(and lifetime for SSDs)，因为您再也不打算使用缓存的资源了。
Stack Overflow用户
发布于 2019-05-14 03:16:49
“防止”缓存的一个肮脏的老把戏是在请求中添加一个随机数。这样，请求-尽管每次都是相同的图片-是不同的。
image= new Image();
image.src = "images/test.png?rnd="+Math.random();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56118527
复制相关文章
相似问题