给定某些尺寸的最大潜在PNG尺寸

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

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

这些文件保存为带有Alpha透明层的PNG,并且为1280x720px.根据绘制的内容,文件大小会有很大差异,我认为这是因为PNG是压缩的.因此,我无法计算出这样的图像可能存在的最大文件大小.由于我想假设最坏情况,我假设PNG压缩不会减少文件大小.鉴于此,最大文件大小是:

1280 x 720 x colordepth

？如果是这样,在colordepth我使用导出图像的情况下应该是什么值canvas.toDataURL()？它会根据浏览器的实现而有所不同canvas吗？我完全在黑暗中.

我知道PNG压缩对照片风格的图像效果不佳,所以我一直在尝试创建一些不易压缩的东西(主要是柔和的,相当随机的渐变).我能够创建的最大值约为675KB,但我确信它远不及潜在的最大尺寸.

所以我要么知道最大文件大小是什么,或者什么样的图像在PNG中提供压缩的可能性最小,所以我可以更好地进行实验.

我希望这是有道理的.

SO上有一些类似的问题:

如何根据文件大小限制确定png维度？

图像的最大尺寸不能超过8000字节？

但似乎没有人回答我的问题.如果我错过了什么,请告诉我.

UPDATE

我试过Ken Fyrstenberg的想法,初步结果很有意义.将图像存储为序列化对象会导致一组数据小于等效dataURL字符串的四分之一.这是在我开始优化它之前.我强烈建议任何处于类似情况的人都试试这种方法.

另一个更新

当我第一次开始这个时,我正在使用SVG.但是,用户绘制的越多DOMElement,一次必须在屏幕上显示的s 越多,响应时间变得越慢(尤其是> 1000个元素).我曾经假设用画布做这件事,并在用户制作时将每个笔画存储在一个数组中,会出现类似的问题."不是这样.

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

Upshot是,无论我多少次插入阵列,重绘操作总是闪电般快速.除了在存储数据以供以后使用时上述尺寸的减小,以及非常容易实现撤销/重做之外.现在对Javascript和canvas印象非常深刻.