Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/csharp/307.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Canvas 给定特定尺寸的最大潜在PNG尺寸_Canvas_Png_Filesize - Fatal编程技术网

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

Canvas 给定特定尺寸的最大潜在PNG尺寸,canvas,png,filesize,Canvas,Png,Filesize,我目前正在创建一个基于HTML5的绘图程序。用户可以绘制一幅图像或几页图像,并将其保存到云中,以便以后快速检索。这是在交互式白板上使用的;老师不能总是确定他们计划上课的IWB是他们将在课堂上使用的,所以我想让数据可以从任何地方访问 我通过Ajax将canvas数据作为数据uri发送到服务器,将数据存储在文件系统中,并在数据库中引用该文件。我的问题是,我不确定这些映像最终会占用文件系统多少空间 这些文件保存为带有alpha透明层的PNG,为1280x720px。根据绘制的内容,文件大小会发生显著变

我目前正在创建一个基于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他正在画布上绘制。用这种方法制作噪声图像是很困难的。。我认为在这种情况下,压缩不太可能增加大小,这是相当安全的。