禁用数据 url jpg 缓存

Question

我有一个恒定的 Base64 编码 jpg 文件源，大约每秒 1-5 个图像，创建一个简单的视频流。它们是这样的：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

将它们输入到 img 元素的 src 属性中会在后台触发由浏览器缓存的请求：

由于每个帧都被缓存，我的应用程序会在短时间内填充浏览器缓存。

1. 如何避免这种缓存行为，以便每个帧要么不被缓存，要么被缓存很短的时间？
2. 如果这是不可能的，那么我如何才能相当快地显示来自流的 jpg 二进制数据*并且无需缓存？

* 我尝试使用jpg.js将原始二进制 jpg 数据解码为原始像素并将它们渲染在 Canvas 上，但这在时间和 CPU 消耗方面成本太高

Answer 1

你可以做到——这很棘手，但有可能。它涉及将 dataURI 转换为 Blob，然后将 blob 转换为objectURL。我用一张图片准备了一个示例，但您可以做很多事情。每次都会创建不同的 URL，因此不会进行缓存。

我的例子： https: //jsbin.com/tuxoveroha/edit?html, output

只需确保在处理完 URL 后使用revokeObjectURL即可释放内存。