<canvas> 元素的最大尺寸

IT技术 javascript html canvas
2021-01-22 23:37:14

我正在处理一个高度600为 101000像素、宽度为几十或几十万像素的画布元素但是,经过一定数量的像素(显然未知)后,画布不再显示我用 JS 绘制的形状。

有谁知道有限制吗?

在 Chrome 12 和 Firefox 4 中测试。

6个回答

2014 年 10 月 13 日更新

所有经过测试的浏览器都对画布元素的高度/宽度有限制,但许多浏览器也限制了画布元素的总面积。我能够测试的浏览器的限制如下:

铬合金:

最大高度/宽度:32,767 像素
最大区域:268,435,456 像素(例如,16,384 x 16,384)

火狐:

最大高度/宽度:32,767 像素
最大区域:472,907,7​​76 像素(例如,22,528 x 20,992)

IE:

最大高度/宽度:8,192 像素
最大面积:不适用

IE手机:

最大高度/宽度:4,096 像素
最大面积:不适用

其他:

我目前无法测试其他浏览器。有关其他限制,请参阅此页面上的其他答案。


在大多数浏览器上超过最大长度/宽度/面积会使画布无法使用。(它将忽略任何绘制命令,即使在可用区域中也是如此。)IE 和 IE Mobile 将接受可用空间内的所有绘制命令。

听起来很有用。不要以为它在github上?
2021-03-15 23:37:14
@aroth,我最终围绕使用多个堆叠<canvas>元素的画布 API 编写了一个包装器,并自动将绘图指令应用于适当的上下文。
2021-03-19 23:37:14
Safari(非iOS 版本)与Chrome.Firefox 一样使用32K。此外,如果您想尝试重新创建一些包装器代码,由于 IE 微不足道的 8K 限制,我开始了自己的开源版本: github.com/adam-roth/wrapped-canvas
2021-03-21 23:37:14
那么,相关的问题......如果他们需要一个大于允许的最大值的画布,如何解决这个限制?
2021-04-04 23:37:14
iPhone 6 Plus 上的 iOS 9.3.1 Safari 被限制为 16777216 像素的区域(例如,4096 x 4096)。我怀疑这是较新的 iOS 设备上的常见数字
2021-04-08 23:37:14

接受的答案已过时且不完整。

浏览器施加不同的画布大小限制,但这些限制通常会根据可用的平台和硬件而变化。这使得它很难做出声明,如“最大的canvas[area/height/width][browser][value]”因为[value]可以改变基于该操作系统,可用RAM,或GPU类型。

有两种处理大型 HTML<canvas>元素的方法:

  1. 将画布尺寸限制为已知可在所有支持的平台上使用的尺寸。
  2. 在渲染之前以编程方式确定客户端上的画布限制。

那些希望以编程方式确定客户端画布限制的人应该考虑使用canvas-size

从文档:

HTML canvas 元素受到现代浏览器和旧浏览器的广泛支持,但每个浏览器和平台组合都施加了独特的大小限制,超过时会使画布无法使用。不幸的是,浏览器没有提供一种方法来确定它们的限制是什么,也没有在创建了无法使用的画布后提供任何类型的反馈。这使得处理大型画布元素成为一项挑战,尤其是对于支持各种浏览器和平台的应用程序。

这个微型库提供了浏览器支持的 HTML 画布元素的最大面积、高度和宽度,以及测试自定义画布尺寸的能力。通过在创建新画布元素之前收集此信息,应用程序能够在每个浏览器/平台的大小限制内可靠地设置画布尺寸。

此处提供了各种平台和浏览器组合的测试结果:

完全公开,我是图书馆的作者。我在 2014 年创建了它,最近重新审视了一个新的与画布相关的项目的代码。我很惊讶地发现 2018 年同样缺乏用于检测画布大小限制的可用工具,因此我更新了代码,发布了它,并希望它可以帮助其他人遇到类似问题。

我在 Firefox 上遇到了画布高度大于 8000 的内存不足错误,chrome 似乎处理得更高,至少到 32000。

编辑:运行更多测试后,我发现 Firefox 16.0.2 出现了一些非常奇怪的错误。

首先,我似乎从内存中(在 javascript 中创建)画布中获得了不同的行为,而不是 html 声明的画布。

其次,如果您没有正确的 html 标签和元字符集,画布可能会被限制为 8196,否则您可以达到 32767。

第三,如果您获得画布的 2d 上下文,然后更改画布大小,您也可能会被限制为 8196。在获取 2d 上下文之前简单地设置画布大小允许您拥有多达 32767 个而不会出现内存错误。

我无法始终如一地获得内存错误,有时它仅在第一页加载时出现,然后随后的高度更改起作用。这是我用http://pastebin.com/zK8nZxdE测试的 html 文件

你确定你的意思是 8192 (2^13)?8196 是一个奇怪的数字。
2021-03-14 23:37:14
“第二,如果你没有正确的 html 标签和元字符集,画布可能会被限制为 8196,否则你可以达到 32767” - 你在这里正确的 html 标签和元字符集是什么意思?
2021-03-23 23:37:14

iOS 最大画布尺寸(宽 x 高):

 iPod Touch 16GB = 1448x1448
 iPad Mini       = 2290x2289
 iPhone 3        = 1448x1448
 iPhone 5        = 2290x2289

2014 年 3 月测试。

这些值是任意的。请参阅下面我的帖子,其中引用了 safari 的内容指南
2021-04-01 23:37:14

对@FredericCharette 的回答进行一些扩展:根据“了解 iOS 资源限制”部分下的safari 内容指南

对于内存小于 256 MB 的设备,画布元素的最大大小为 3 兆像素,对于内存大于或等于 256 MB 的设备,最大大小为 5 兆像素

因此,5242880 (5 x 1024 x 1024) 像素的任何大小变化都适用于大内存设备,否则为 3145728 像素。

5 兆像素画布示例(宽 x 高):

Any total <= 5242880
--------------------
5 x 1048576 ~= 5MP   (1048576 = 1024 x 1024)
50 x 104857 ~= 5MP
500 x 10485 ~= 5MP

等等..

最大的 SQUARE 画布是(“MiB”= 1024x1024 字节):

device < 256 MiB   device >= 256 MiB   iPhone 6 [not confirmed]
-----------------  -----------------   ---------------------
<= 3145728 pixels  <= 5242880 pixels   <= 16 x 1024 x 1024 p
1773 x 1773        2289 x 2289         4096 x 4096
更具体地说,iPhone5 的限制是 3 * 1024 * 1024 = 3145728 像素。(在想知道为什么我的画布在 Android 上很好但在 iOS 上是空白的之后,我找到了这个答案,还有stackoverflow.com/questions/12556198/...并让我的 Phonegap 应用程序工作。)
2021-03-15 23:37:14
@matb33 在评论中报道了 iPhone 6 似乎有 16 * 1024 * 1024 的限制。
2021-03-25 23:37:14
仅供参考,Apple 已从“Safari / Know iOS Resource Limits”中删除了特定大小信息。现在它只是关于通过使用小图像来最小化带宽的一般建议。
2021-04-05 23:37:14