我想提一下,图像文件正在不断变化。 我正在使用NodeJS的中间件:
app.use("/image.jpg",express.static(_dirname+"/image.jpg")
问题在于节点传达了image.jpg而没有真正告知文件已被修改。 按下按钮将出现此部分。
var image=new Image();
image.onload=function(){rendering to canvas}
image.src="/image.jpg";
不知何故有问题......
服务器的图片文件被修改然后它发送到客户端绘制图像,关于结果,客户端正在呈现它已经再次加载的第一个图像,尽管网址上的图像已被更改。 我认为客户端正在缓存图像?并认为图像未经修改,因此一直使用它。 有没有办法在网址上绘制当前图像? 还有更好的方法吗?
答案 0 :(得分:1)
You can use the fetch()
API点击次数以实施cache-busting,而不会使用大量/image.jpg?bust=...
资源混淆客户端的浏览器缓存。
在您的服务器中决定要允许静态访问更改文件的文件夹后(这比您允许静态访问单个文件的模式更可取),您可以使用{{来实现实时更新3}}像这样:
节点app.js
(fs.watch()
):
const fs = require('fs')
const path = require('path')
const app = require('express')()
const server = require('http').Server(app)
const io = require('socket.io')(server)
server.listen(process.env.PORT || 8080)
app.use('/', express.static(path.resolve(__dirname, './watched-directory')))
//...
io.on('connection', (socket) => {
//...
});
fs.watch('watched-directory', {
//don't want watch process hanging if server is closed
persistent: false,
//supported on Windows OS / Mac OSX
recursive: true,
}, (eventType, filename) => {
if (eventType === 'change') {
io.emit('filechange', filename)
}
})
浏览器index.html
:
<script src="/socket.io/socket.io.js"></script>
<script>
let socket = io.connect()
socket.on('filechange', async (filename) => {
console.log(filename)
let response = await fetch(filename, { cache: 'no-store' })
let blob = await response.toBlob()
let url = URL.createObjectURL(blob)
//modified from your question
let image = new Image()
image.addEventListener('load', () => {
//your canvas rendering code here
})
image.src = url
})
</script>