Canvas 给定特定尺寸的最大潜在PNG尺寸

我目前正在创建一个基于HTML5的绘图程序。用户可以绘制一幅图像或几页图像，并将其保存到云中，以便以后快速检索。这是在交互式白板上使用的；老师不能总是确定他们计划上课的IWB是他们将在课堂上使用的，所以我想让数据可以从任何地方访问

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

这些文件保存为带有alpha透明层的PNG，为1280x720px。根据绘制的内容，文件大小会发生显著变化，我认为这是因为PNG是压缩的。正因为如此，我在计算这样一个图像可能的最大文件大小时遇到了困难。因为我想假设一个最坏的情况，我将假设PNG压缩不会减少文件大小。鉴于此，最大文件大小是否为：

1280 x 720 x colordepth

?？如果是这样，如果我使用canvas.toDataURL（）导出图像，那么

colordepth

应该是什么值？根据

canvas

的浏览器实现，它会有所不同吗？我完全不知道这件事

我知道PNG压缩不能很好地处理照片样式的图像，所以我一直在尝试创建一些不容易压缩的东西（主要是柔和的、相当随机的渐变）。我所能创建的最大容量约为675KB，但我确信这还远未达到潜在的最大容量

所以我要么需要知道最大文件大小，要么知道哪种图像在PNG中提供的压缩潜力最小，这样我才能更好地进行实验

我希望这是有道理的

---

关于这一点，有几个类似的问题：

但似乎没有人回答我的问题。如果我错过了什么，一定要开导我

---

更新

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

---

另一次更新

当我第一次开始这项工作时，我正在使用SVG。然而，用户画得越多，屏幕上立刻出现的

DOMElement

s就越多，响应时间也就越慢（尤其是>1000个元素）。我曾假设，使用画布进行绘制，并在用户绘制时将每个笔划存储在一个数组中，会出现类似的问题。”事实并非如此

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

---

结果是，无论我在数组中插入多少笔划，重画操作总是闪电般快速。除此之外，在存储数据以备日后使用时，还可以减少数据的大小，并且可以非常轻松地实现撤消/重做。现在对Javascript和画布都印象深刻。

要计算位图的大小，PNG使用假设存在alpha通道

width x height x 4

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

之所以使用4，是因为RGBA（通常）表示为32位（因此为4字节）

如果不存在alpha通道，则改为乘以3（24位，RGB每个8位）

---

除此之外，头和块将增加大小，但压缩将减少大小

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

在您的情况下，最大尺寸为：

1280 x 720 x 4 = 3 686 400 bytes

在1024上进行千字节除法，在1024上再次进行mb除法（这里的结果是3.5mb）

---

ToIP：为了共享绘图，您可能需要考虑共享序列化对象而不是数据URI，因为数据URI创建是性能饥饿的，并且会造成不必要的开销，而序列化对象通常具有低尺寸和低性能影响。它们也更容易通过网络传输。对象可以包含线条、位置、颜色等。

哇，谢谢！这很容易理解。您知道

canvas

是否总是作为RGBA输出吗？我一直在看规范，但找不到它的具体参考。@DavidJohnWelsh没问题！：）是的。唯一的例外是toDataURL（即jpeg和类似的RGB格式），实际上，当我最初开始这项工作时，我是作为SVG来做的，认为存储数据会更容易，实现撤销（我现在使用分层画布）这样的东西会更简单。现在我想知道是否应该在用户创建路径时存储每个路径；这也意味着我可以在没有额外画布的情况下做任何事情，正如你所说，可能会大大减少所需的存储空间。。。非常有趣的想法，谢谢！但愿我能再次投票……“压缩将缩小尺寸”这通常（几乎总是）是正确的，但并不总是正确的。如果图像是纯噪声，压缩实际上会增加（非常小）大小，这与头文件+开销块有关。@leonbloy他正在画布上绘制。用这种方法制作噪声图像是很困难的。。我认为在这种情况下，压缩不太可能增加大小，这是相当安全的。