Javascript 图像缓存的直接操作

我想直接操作图像缓存，如下所示

使用画布创建图像数据并将其存储在图像对象中 以某种方式将图像对象与url（如www.foo.com/bar.png）关联 将任何未来图像的.src设置为该url将使用缓存版本 我认为这是不可能的，但有人有什么建议吗

---

我能想到的最接近的方法是设置一个属性，例如data src，然后使用MutationObserver截取我的假url，并以此方式设置图像src。

我能想到的唯一方法是首先将图像数据发送到服务器，这样它可以在以后请求/bar.png时使用相同的图像数据进行响应。这可能需要将图像数据暂时存储在服务器上，就像在会话中一样，以便在以后再次请求图像数据时，仍然可以使用相同的图像数据进行响应，f.e.由不信任缓存并希望再次获取图像数据的浏览器执行。以后谁/什么会将图像源设置为/bar.png？你不能确保在那个时候首先使用数据URI吗？可能有一点背景知识？就像那样，我会说不，你不能这么做。但你为什么要这么做？可能有一个解决办法。与加载一样，如果src是目标，请将其src更改为所需的src。我正在开发一个支持html5但不实现图像缓存的连接设备，因此我实现了indexeddb缓存来存储从产品目录中动态获取的最流行图像，以减少cdn带宽。这样做的目的是，每次应用程序在其原始URL下启动时，都会将这些图像强制放入缓存中，以实现无缝连接。当然，我不需要这样做，但这部分是实验。