前端图片存储有解决方案吗

Question

比如像im聊天，对方发过来的图片需要前端存起来，再打开聊天的时候渲染到聊天框，期间这些数据都放前端（浏览器），虽然有点不合理，但真要这么做有办法吗

Answer 1

CDN?
fastdfs?

你要给出具体需求才知道。

Answer 2

首先，利用浏览器的强缓存（直接从本地磁盘读取数据，而不进行网络请求）可以实现你要的效果；
如果不考虑强缓存，需要明确的是js没有读取本地文件的权限（api），所有需要将图片转化为二进制存储（canvas的toDataURL），转化之后可以存储在localStorage(大小限制)、indexedDB。

Answer 3

图片可以转为base64字符串，然后没啥问题了吧。

怎么转？img -> canvas -> base64

function imgToCanvas (img) {
  let canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  let ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)
  return canvas
}

canvas转base64:

let imgString = canvas.toDataURL()

渲染：
imageString设置为img的src即可。

Answer 4

emmm 纯前端再强都有限制的 ....
再不济清理缓存还是成为 BUG 看不到 ...
后端走接口吧 ... 强行缓存页面也卡得不行 ...
以 300 行聊天数据，50 个图片计算

Answer 5

indexDB

Answer 6

图片一般都比较大，一张不大多，存几张也不够用了，存储大小限制使得几乎没得选，看看indexDB吧

Answer 7

im并不会去直接发送源文件给对方

一般的做法都是a发给b，发送一个链接，类型是图片，然后b拿到链接判断图片类型，去获取图片
发送视频音频一样的原理
所以你只用保存很少的数据就行了

如果你想要离线无网的情况下的那种缓存，当我没说