canvas - 给定特定尺寸的最大潜在 PNG 尺寸

Question

我目前正在创建一个 HTML5 canvas基于绘图程序。用户可以绘制一张图像或几张图像“页面”，并将其保存到云端以供日后快速检索。这是用于交互式白板的；老师不能总是确定他们计划类(class)使用的 IWB 是他们将在该类(class)中使用的 IWB，因此我希望可以从任何地方访问数据。

我通过 Ajax 将 Canvas 数据作为数据 URI 发送到服务器，将数据存储在文件系统上，并在数据库中引用该文件。我的问题是我不确定这些图像最终会在文件系统上占用多少空间。

这些文件保存为带有 alpha 透明层的 PNG，大小为 1280x720px。根据绘制的内容，文件大小差异很大，我认为这是因为 PNG 被压缩了。因此，我无法计算此类图像的最大可能文件大小。因为我想假设最坏的情况，所以我假设 PNG 压缩不会减少文件大小。鉴于此，最大文件大小是否为:

1280 x 720 x colordepth

?如果是这样，应该取什么值 colordepth是的，因为我正在使用 canvas.toDataURL() 导出图像?是否会因 canvas 的浏览器实现而异?我在这里完全一头雾水。

我知道 PNG 压缩不能很好地处理照片风格的图像，所以我一直在尝试创建一些不容易压缩的东西(主要是柔和的、相当随机的渐变)。我能够创建的最大大小约为 675KB，但我确信这远不及潜在的最大大小。

所以我要么需要知道最大文件大小是多少，或者哪种图像在 PNG 中提供的压缩潜力最小，以便我可以更好地进行实验。

我希望这是有道理的。

SO上有几个类似的问题:

How to determine png dimensions based on file size limit?

What is the maximum dimensions of an image that can't be greater than 8000 bytes?

但似乎没有人回答我的问题。如果我错过了什么，请赐教。

更新

我给了 Ken Fyrstenberg's idea尝试一下，初步结果相当不错。将图像存储为序列化对象会导致一组数据小于等效 dataURL 字符串大小的四分之一。这是在我什至开始优化它之前。我强烈建议任何处于类似情况的人尝试这种方法。

另一个更新

当我第一次开始这个时，我使用的是 SVG。然而，用户画得越多，就越 DOMElement s 必须立即出现在屏幕上，响应时间越慢(尤其是元素超过 1000 时)。我曾假设使用 Canvas 进行操作并将每个笔划存储在用户制作的数组中，也会出现类似的问题。 '不是这样。

我想与跟踪 DOM 元素及其所有属性、文档中的位置以及与其他元素的关系相比，简单地存储路径数据的开销要少得多。

结果是，无论我在数组中插入多少笔画，重绘操作总是闪电般快速。除了前面提到的在存储数据供以后使用时减小的大小之外，还有非常简单的撤消/重做实现。现在对 Javascript 和 canvas 都印象深刻。

Answer 1

要计算位图 PNG 的大小，假设存在 alpha channel

width x height x 4

将为您提供原始未压缩字节的大小。

使用 4 的原因是因为 RGBA 将(通常)表示为 32 位(因此为 4 个字节)。

如果不存在 alpha channel ，则乘以 3(24 位，RGB 每 8 位)。

除此之外， header 和块会增加大小，但压缩会减小大小。

但是，我认为这将为您提供一个足够好的数字作为最大值。

在您的情况下，大小将是最大的:

1280 x 720 x 4 = 3 686 400 bytes

要在 1024 上除以千字节，在 1024 上再次除以 mb(这里的结果是 3.5mb)。

提示:对于共享绘图，您可能需要考虑共享序列化对象而不是 data-uri，因为 data-uri 创建需要性能并且会产生不必要的开销，而序列化对象通常具有较小的尺寸和较低的性能影响。它们也更容易通过网络传输。对象可以包含线条位置、颜色等。