我目前正在创建一个基于HTML5 canvas的绘图程序。用户可以绘制图像或几个“页面”图像，并将其保存到云中以便以后快速检索。这适用于交互式白板;老师不能总是确定他们计划上课的IWB是他们将在该课程中使用的那个，所以我想从任何地方访问数据。
我通过Ajax将画布数据作为数据URI发送到服务器，将数据存储在文件系统中，并在数据库中存储对文件的引用。我的问题是我不确定文件系统上这些图像最终会占用多少空间。
文件保存为带有Alpha透明层的PNG，为1280x720px。根据绘制的内容，文件大小会有很大差异，我认为这是因为PNG是压缩的。因此，我无法计算出这样的图像可能存在的最大文件大小。由于我想假设最坏情况，我假设PNG压缩不会减少文件大小。鉴于此，最大文件大小是：
1280 x 720 x colordepth
？如果是，那么colordepth应该是什么值，因为我使用canvas.toDataURL()导出图像？它会因canvas的浏览器实现而有所不同吗？我完全在黑暗中。
我知道PNG压缩对照片风格的图像效果不佳，所以我一直在尝试创建一些不易压缩的东西（主要是柔和的，相当随机的渐变）。我能够创建的最大值大约是675KB，但我确信它远不及潜在的最大尺寸。
所以我要么知道最大文件大小是什么，或者哪种图像在PNG中提供压缩的可能性最小，所以我可以更好地进行实验。
我希望这是有道理的。
在SO上有一些类似的问题：
但似乎没有人回答我的问题。如果我错过了什么，请告诉我。
更新
我试过了Ken Fyrstenberg's idea，初步结果非常重要。将图像存储为序列化对象会导致一组数据小于等效dataURL字符串大小的四分之一。这是在我开始优化它之前。我强烈建议任何处于类似情况的人都试试这种方法。
另一个更新
当我第一次开始这个时，我正在使用SVG。但是，用户绘制的越多，DOMElement一次必须在屏幕上显示，响应时间变得越慢（特别是在> 1000个元素时）。我曾经假设用画布做这件事，并在用户制作时将每个笔画存储在一个数组中，会出现类似的问题。 “不是这样。
与跟踪DOM元素及其所有属性，文档中的位置以及与其他元素的关系相比，我认为简单地存储路径数据的开销要少得多。
Upshot是，无论我多少次插入阵列，重绘操作总是闪电般快速。除了在存储数据以供以后使用时上述尺寸的减小，以及非常容易实现撤销/重做之外。 非常现在对Javascript和canvas都印象深刻。
答案 0 :(得分：5)
要计算PNG使用的位图大小，假设存在alpha通道
width x height x 4
将为您提供原始未压缩字节的大小。
使用原因4是因为RGBA（通常）表示为32位（因此为4个字节）。
如果不存在alpha通道而不是3乘以（24位，每个8位RGB）。
除了标题和块之外还会添加大小，但压缩会减小大小。
但我认为这会为你提供一个足够好的数字作为最大值。
在您的情况下，大小将是最大值：
1280 x 720 x 4 = 3 686 400 bytes
要达到千字节除以1024，要在1024处再次进行mb除法（此处结果为3.5mb）。
提示：对于共享绘图，您可能需要考虑共享序列化对象而不是数据uri，因为数据uri创建是性能饥饿并且会产生不必要的开销，而序列化对象通常具有较小的大小和较低的性能影响。它们也更容易通过网络传输。对象可以包含行位置，颜色等。