如何本地存储base64格式图片 实现离线重绘大图规避CORS错误

我需要以最高性能的方式存储最高分辨率下的图片像素数据。之前从图床拉取图片转base64的方案运行效果很好，实现代码如下：

async function toBase64(file) {
   return new Promise((resolve, reject) => {
   const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
   });
}

async function getBlob(){
   const blob = fetch("https://i.imgur.com/sOmEuRl.jpg")
      .then(function (response) {
         return response.blob();
      })
      .catch(function(err){
          console.log(err)
      })
          
   return blob
}

const blob = await getBlob()
const base64 = await toBase64(blob);
const src = base64

但我当前开发的项目需要支持离线使用，使用本地文件URL时碰到了CORS错误，直接在HTML里通过img标签加载本地图片也会触发同样的CORS问题，暂时没有可行的解决思路。
我试过读取像素数据后通过Node.js把数据按数组格式写入新文件，但生成的文件体积太大，无法正常使用。有没有办法能在首次拉取到数据后就存储在本地，后续不需要再从服务器获取资源？

只需将base64设置为HTML img标签的图片源，随后隐藏该图片即可，感谢Kaiido提供的思路。

• 首次联网加载时，把拉取到的图片转换出的base64字符串存入本地持久化存储，大容量场景优先选择IndexedDB，比localStorage更适合存储大体积的图片数据
• 离线使用时直接读取本地存储的base64字符串赋值给img的src属性，不需要请求远程资源，也不需要读取本地文件，完全不会触发CORS限制
• 这种存储方式比直接存储原始像素数组体积小很多，不会出现文件过大无法使用的问题

如果是纯离线单文件部署的场景，也可以在构建阶段就把所有需要用到的图片提前转成base64写死在代码里，彻底脱离对外部资源的依赖。

内容的提问来源于stack exchange，提问作者EdelweissPirate