javascript - 禁用数据 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

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

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

只需确保您使用 revokeObjectURL完成 URL 处理后，释放内存。