多次重复JavaScript生成的图像

Question

我有一个项目，我转而在客户端从SVG生成用户头像。一个问题是聊天窗口，其中化身需要在每条消息附近显示，可能数百甚至数千次。

对于服务器端生成的图像，我可以使用<img src="" />并且相当谨慎，因为使用相同的URL存储每个图像不会有内存开销。如果我想在客户端做这一切，不知道该怎么办。

Answer 1

到目前为止，我已经提出了这些选择：

• 为每条消息创建一个画布并在那里绘制头像。显然，这意味着始终将每个画布存储在内存中，所以不是一个好主意。
• 使用toDataURL和<img src="data:...">。不确定所有（或任何）浏览器是否会使用多个图像的数据网址进行优化，并且无法找到相关信息。
• 将所述数据网址转换为blob并使用<img src="blob:...">。最复杂的解决方案，但至少浏览器会希望知道它是相同的blob而不是将副本保存在内存中。

尽管如此，也许有更优雅和高效的东西。

编辑：我最终使用toBlob polyfill使用blob解决方案。它工作得很好，也使用压缩的PNG而不是未压缩的画布数据。希望有一天有人觉得这很有用。