我正在用 HTML5/JavaScript 开发一个图表应用程序。所有绘图都是用SVG完成的，使用 Raphael 或 qooxdoo SVG（尚未确定）。绘图区域应使用自定义背景图像。图像太大而无法下载（几兆字节）对于 2560x1600 Retina 分辨率），这就是我动态构建它的原因，从图块组合它并应用位图效果。为此，我使用HTML5 画布。之后，必须使生成的背景图像可以从 SVG 访问。为了实现这一点，我从画布中导出数据 URI<image xlink:href="data:image/png;base64,..."/> ，并在 SVG 内部使用。
这适用于简单的示例，但我有点担心生产中的内存使用情况。假设图像占用 12MB 内存（2560 * 1600 *3 字节 ber 像素），将使用多少额外内存？我想至少会分配一些兆字节来存储 base64 编码的 PNG 压缩表示作为数据 URI，另外 12 兆字节将用于 SVG<image>元素的缓冲区。
我想知道是否有一种方法可以将其短路并避免冗余的图像编码 - 解码？