在这种情况下哪个最好，Base64 还是静态图像？答案

【问题标题】：Which is best in this scenario, Base64 or static images?在这种情况下哪个最好，Base64 还是静态图像？
【发布时间】：2012-06-19 04:46:45
【问题描述】：

我的应用程序的一部分大量使用图像处理。使用 ajax 帖子和图像处理服务器端使用多种方法进行裁剪、过滤器等。用户执行的每个操作操作都会创建一个物理图像而不删除原始图像，以便允许“撤消”系统使用户能够将其图像恢复到任何先前的时间点。

当用户完成会话或关闭浏览器时，所有这些“临时”图像都会通过帖子删除到服务器。

对于现代浏览器，我们将使用 html5 扩展图像处理功能。使用画布使我们能够在客户端执行所有这些图像操作，而无需通过编码和动态嵌入 base64 数据来创建额外的静态图像。

我关心的是“撤消”系统。使用静态回退方法，我们存储了一个对象数组，其中包含指向静态图像的链接。这提供了完整的撤消功能。但是，如果我们在所有客户端都这样做，那么这个数组实际上必须包含每个“撤消”点的 base64 数据的副本对于用户正在操作的每个图像（典型的用例可能是 20 个原始图像，每个图像有 4-5 个撤消点）。

在我花了几天时间对此进行原型制作之前，我希望有人可能对这种方法有一些 cmet。这是个好主意吗？馊主意？从浏览器性能和内存使用的角度来看，存储大量 base64 图像数据对象是不是一个坏主意？

欢迎提出任何想法，在此先感谢。

【问题讨论】：

Is storing a huge data object of base64 images a bad idea from a browser performance and memory usage perspective? 您希望它们有多大？一边 1400px，是的，一边 5px，不。另外，你怎么知道他们什么时候关闭浏览器？
它们可以是最大 1200 像素的正方形。我们正在使用 javascript onbeforeunload 事件，该事件在用户关闭浏览器并向服务器发送包含图像文件名的帖子时触发。它工作得很好。唯一不会删除图像的情况是浏览器崩溃。但是我们已经将清理方法设置为在给定时间后自动发生。
我认为这个想法很好。从下面复制我的数学：如果每张图片约为 1200 像素（即 1.2 千像素或 0.0012 兆像素），那么我们可以假设每张图片约为 24kb，因此如果我们在此基础上添加 30%，则每张图片约为 30k。 20张图片乘以5个备份点就是100点，乘以30k张图片，就是3MB。当然，我的电脑上有更大的音频文件。我认为在本地机器上的 localstorage 中存储这样的东西是完美的。
实际上，当我阅读它时，图像可以是 1200px 正方形（1200px 将是 300px x 400 px）。这是 1200*1200px = 1,440,000 像素，这意味着四个通道 (RGBa) 中的 5,760,000 字节或 5.5 MB 未压缩数据，或 base-64 编码中的 7.15 MB。
哎哟......我显然需要自己做一些数学，看看典型的用例场景。图像是 jpeg，对于更高质量的图像，平均大小约为 200kb。那么我认为base64表示会更多吗？

标签： php javascript jquery

【解决方案1】：

这是个坏主意。 Base64 占用的存储空间比实际编码的数据多 30%。如果您的服务器上的图像可以通过实际 URL 访问，请考虑将 <img> 元素的引用与 DOM 分离。

【讨论】：

这并不意味着这是一个糟糕的主意。如果每张图片约为 1200 像素（即 1.2 千像素或 0.0012 兆像素），那么我们可以假设每张图片约为 24kb，因此如果我们在此基础上添加 30%，则每张图片约为 30k。 20 张图片乘以 5 个备份点就是 100 点，乘以 30k 张图片，就是 3MB。当然，我的电脑上有更大的音频文件。
另一种选择是在客户端执行所有操作，然后将 base64 数据发送回服务器以生成实际图像？感觉这是最好的妥协吗？
没错，这不是一个糟糕的主意，但是如果您实际上不需要 B64 格式的数据，那么保留 B64 数据是没有意义的。取决于需要这些图像的实际代码。
这样做的目的是防止任何实际的图像文件出现在服务器磁盘上，从而减少存储需求和磁盘访问需求等。
@gordyr 我相信使用<canvas> 您实际上可以保留canvas.getContext('2d').getImageData(...) 返回的原始图像数据