这是我如何在 Canvas 上绘制图像的基本实现。
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
function drawImg(x, y) {
imageObj.onload = function() {
context.drawImage(imageObj, x, y);
};
imageObj.src = 'http://www.mysite.com/temp.jpg';
}
我有一个服务器端图像渲染脚本，我在其中将图像写入相同的文件位置，例如:“temp.jpg”。当图像发生变化时，我使用 Ajax 来提示浏览器，然后运行函数再次加载图像。但是，由于 URL 始终相同，因此加载的第一个图像似乎已缓存并且永远不会重绘。
我已经找到了几种解决方案，但我不确定哪种方案最有效或者是真正的最佳方案。一些建议包括使用时间戳稍微操纵 URL，并且我看到了一些流式传输的引用。
一些关键点:
- 我不想清除 Canvas ，我希望最新的图像位于上一张图像之上，如果 x,y 坐标发生变化或图像大小不同，则应该分层。
- 我真的不想为每个新图像更改图像文件名，这似乎有点过分了。
谢谢。
编辑:
决定将我的 github 项目包含在我正在处理的 socket.io 版本中。我有大约 5 个不同的版本正在制作中，但这是我主要跟踪的版本。随意拆开它我确信我在内存管理方面有一些不好的做法。 https://github.com/Pwn9/tcp-io-bridge
最佳答案
IMO，最好的解决方案是向图像添加时间戳(您也可以添加随机值，只是为了确定)作为参数。这避免了必须存储特定的变量计数器并且非常容易实现。也许是这样的:
"?" + +new Date() + "_" + Math.random ()
你可能也只是想完全避免缓存，但如果你没有将所有图像转换为 Canvas 对象，这是有问题的，因为在大多数基于 Webkit 的浏览器中，如果介于 -页面缓存也被禁用..
[edit:] 或者，换句话说，在基于 Webkit 的浏览器中，如果您使用 Javascript 重新加载某些内容并且您的 header 显示“已过期”，则将重新请求图像。在 IE11 和 Firefox 中，图像将被缓存到页面刷新，即使缓存被禁用也是如此。
关于javascript - 当图像发生变化而不是 URI 时，如何将图像绘制到 Canvas 上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21562674/