Javascript <canvas> 元素的最大尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6081483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maximum size of a <canvas> element
提问by seriousdev
I'm working with a canvas element with a height of 600to 1000pixels and a width of several tens or hundreds of thousands of pixels. However, after a certain number of pixels (obviously unknown), the canvas no longer display shapes I draw with JS.
我正在处理一个高度600为 101000像素、宽度为几十或几十万像素的画布元素。但是，经过一定数量的像素（显然未知）后，画布不再显示我用 JS 绘制的形状。
Does anyone know if there's a limit?
有谁知道有限制吗？
Tested both in Chrome 12 and Firefox 4.
在 Chrome 12 和 Firefox 4 中测试。
回答by Brandon Gano
Updated 10/13/2014
2014 年 10 月 13 日更新
All tested browsers have limits to the height/width of canvas elements, but many browsers also limit the total area of the canvas element. The limits are as follows for the browsers I'm able to test:
所有经过测试的浏览器都对画布元素的高度/宽度有限制，但许多浏览器也限制了画布元素的总面积。我能够测试的浏览器的限制如下：
Chrome:
铬合金：
Maximum height/width: 32,767 pixels
Maximum area: 268,435,456 pixels (e.g., 16,384 x 16,384)
最大高度/宽度：32,767 像素
最大区域：268,435,456 像素（例如，16,384 x 16,384）
Firefox:
火狐：
Maximum height/width: 32,767 pixels
Maximum area: 472,907,776 pixels (e.g., 22,528 x 20,992)
最大高度/宽度：32,767 像素
最大区域：472,907,776 像素（例如，22,528 x 20,992）
IE:
IE：
Maximum height/width: 8,192 pixels
Maximum area: N/A
最大高度/宽度：8,192 像素
最大面积：不适用
IE Mobile:
移动互联网：
Maximum height/width: 4,096 pixels
Maximum area: N/A
最大高度/宽度：4,096 像素
最大面积：不适用
Other:
其他：
I'm not able to test other browsers at this time. Refer to the other answers on this page for additional limits.
我目前无法测试其他浏览器。有关其他限制，请参阅此页面上的其他答案。
Exceeding the maximum length/width/area on most browsers renders the canvas unusable. (It will ignore any draw commands, even in the usable area.) IE and IE Mobile will honor all draw commands within the usable space.
在大多数浏览器上超过最大长度/宽度/面积会使画布无法使用。（它会忽略任何绘制命令，即使在可用区域。）IE 和 IE Mobile 将接受可用空间内的所有绘制命令。
回答by Ben Burnett
I've ran into out of memory errors on Firefox with canvas heights greater than 8000, chrome seems to handle much higher, at least to 32000.
我在 Firefox 上遇到了画布高度大于 8000 的内存不足错误，chrome 似乎处理得更高，至少到 32000。
EDIT: After running some more tests, I've found some very strange errors with Firefox 16.0.2.
编辑：运行更多测试后，我发现 Firefox 16.0.2 出现了一些非常奇怪的错误。
First, I seem to get different behavior from in memory (created in javascript) canvas as opposed to html declared canvas.
首先，我似乎从内存中（在 javascript 中创建）画布中获得了不同的行为，而不是 html 声明的画布。
Second, if you don't have the proper html tag and meta charset, the canvas might be restricted to 8196, otherwise you can go up to 32767.
其次，如果您没有正确的 html 标签和元字符集，画布可能会被限制为 8196，否则您可以达到 32767。
Third, if you get the 2d context of the canvas and then change the canvas size, you might be restricted to 8196 as well. Simply setting the canvas size before grabbing the 2d context allows you to have up to 32767 without getting memory errors.
第三，如果您获得画布的 2d 上下文，然后更改画布大小，您也可能会被限制为 8196。在获取 2d 上下文之前简单地设置画布大小允许您拥有多达 32767 个而不会出现内存错误。
I haven't been able to consistently get the memory errors, sometimes it's only on the first page load, and then subsequent height changes work. This is the html file I was testing with http://pastebin.com/zK8nZxdE.
我无法始终如一地获得内存错误，有时它仅在第一页加载时出现，然后随后的高度更改起作用。这是我用http://pastebin.com/zK8nZxdE测试的 html 文件。
回答by Dado
iOS max canvas size (width x height):
iOS 最大画布尺寸（宽 x 高）：
iPod Touch 16GB = 1448x1448
iPad Mini = 2290x2289
iPhone 3 = 1448x1448
iPhone 5 = 2290x2289
tested on march 2014.
2014 年 3 月测试。
回答by dcbarans
To expand a bit on @FredericCharette answer: As per safari's content guideunder section "Know iOS Resource Limits":
对@FredericCharette 的回答进行一些扩展：根据“了解 iOS 资源限制”部分下的safari 内容指南：
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM
对于内存小于 256 MB 的设备，画布元素的最大大小为 3 兆像素，对于内存大于或等于 256 MB 的设备，最大大小为 5 兆像素
Therefore, any size variation of 5242880 (5 x 1024 x 1024) pixels will work on large memory devices, otherwise it's 3145728 pixels.
因此，5242880 (5 x 1024 x 1024) 像素的任何大小变化都适用于大内存设备，否则为 3145728 像素。
Example for 5 megapixel canvas (width x height):
5 兆像素画布示例（宽 x 高）：
Any total <= 5242880
--------------------
5 x 1048576 ~= 5MP (1048576 = 1024 x 1024)
50 x 104857 ~= 5MP
500 x 10485 ~= 5MP
and so on..
等等..
The largest SQUARE canvases are ("MiB" = 1024x1024 Bytes):
最大的 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
回答by jhildenbiddle
Update for 2018:
2018 年更新：
As time marches on, canvas limitations have changed. Sadly, what hasn't changed is the fact that browser's still do not provide information on canvas size limitations through the Canvas API.
随着时间的推移，画布的局限性发生了变化。遗憾的是，没有改变的是浏览器仍然没有通过 Canvas API 提供有关画布大小限制的信息。
For those looking to programmatically determine the browser's max canvas size or test support for custom canvas dimensions, check out canvas-size.
对于那些希望以编程方式确定浏览器的最大画布尺寸或测试对自定义画布尺寸的支持的人，请查看canvas-size。
From the docs:
从文档：
The HTML canvas element is widely supported by modern and legacy browsers, but each browser and platform combination imposes unique size limitations that will render a canvas unusable when exceeded. Unfortunately, browsers do not provide a way to determine what their limitations are, nor do they provide any kind of feedback after an unusable canvas has been created. This makes working with large canvas elements a challenge, especially for applications that support a variety of browsers and platforms.
This micro-library provides the maximum area, height, and width of an HTML canvas element supported by the browser as well as the ability to test custom canvas dimensions. By collecting this information before a new canvas element is created, applications are able to reliably set canvas dimensions within the size limitations of each browser/platform.
HTML canvas 元素受到现代浏览器和旧浏览器的广泛支持，但每个浏览器和平台组合都施加了独特的大小限制，超过时会使画布无法使用。不幸的是，浏览器没有提供一种方法来确定它们的限制是什么，也没有在创建了无法使用的画布后提供任何类型的反馈。这使得处理大型画布元素成为一项挑战，尤其是对于支持各种浏览器和平台的应用程序。
这个微型库提供了浏览器支持的 HTML 画布元素的最大面积、高度和宽度，以及测试自定义画布尺寸的能力。通过在创建新画布元素之前收集此信息，应用程序能够在每个浏览器/平台的大小限制内可靠地设置画布尺寸。
A demo link and test resultsare available in the README, as well as a known issuessection which touches on performance and virtual machine considerations.
自述文件中提供了演示链接和测试结果，以及涉及性能和虚拟机注意事项的已知问题部分。
Full disclosure, I am the author of the library. I created it back in 2014 and recently revisited the code for a new canvas-related project. I was surprised to find the same lack of available tools for detecting canvas size limitations in 2018 so I updated code, released it, and hope it helps others running into similar issues.
完全公开，我是图书馆的作者。我在 2014 年创建了它，最近重新审视了一个新的与画布相关的项目的代码。我很惊讶地发现 2018 年同样缺乏检测画布大小限制的可用工具，所以我更新了代码，发布了它，并希望它能帮助其他人遇到类似的问题。
回答by WSkid
According to w3 specs, the width/height interface is an unsigned long - so 0 to 4,294,967,295 (if I remember that number right -- might be off a few).
根据w3 规范，宽度/高度接口是无符号长整型 - 所以 0 到 4,294,967,295（如果我没记错这个数字 - 可能会少一些）。
EDIT: Strangely, it says unsigned long, but it testing shows just a normal long value as the max: 2147483647. Jsfiddle- 47 works but up to 48 and it reverts back to default.
编辑：奇怪的是，它说无符号长，但测试显示只是一个普通的长值作为最大：2147483647的jsfiddle- 47级的作品，但多达48个，并将其恢复为默认值。
回答by avikaza123
Even though the canvas will allow you to put height=2147483647, when you start drawing, nothing will happen
即使画布允许您放置 height=2147483647，当您开始绘图时，什么也不会发生
Drawing happens only when I bring the height back to 32767
只有当我将高度恢复到 32767 时才会发生绘图
回答by matt burns
iOS has different limits.
iOS 有不同的限制。
Using the iOS 7 simulator I was able to demonstrate the limit is 5MB like this:
使用 iOS 7 模拟器，我能够证明限制是 5MB，如下所示：
var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1024;
alert(canvas.toDataURL('image/jpeg').length);
// prints "110087" - the expected length of the dataURL
but if I nudge the canvas size up by a single row of pixels:
但是，如果我将画布大小微调一行像素：
var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1025;
alert(canvas.toDataURL('image/jpeg'));
// prints "data:," - a broken dataURL
回答by Manish Gupta
On PC-
I don't think there is a restriction but yes you can get out of memory exception.
在 PC 上-
我认为没有限制，但是您可以解决内存不足异常。
On Mobile devices-
Here is the restrictions for the canvas for mobile devices:-
在移动设备上-
以下是移动设备画布的限制：-
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
对于内存小于 256 MB 的设备，画布元素的最大大小为 3 兆像素，对于内存大于或等于 256 MB 的设备，最大大小为 5 兆像素。
So for example - if you want to support Apple's older hardware, the size of your canvas cannot exceed 2048×1464.
举个例子——如果你想支持苹果的旧硬件，你的画布大小不能超过 2048×1464。
Hope these resources will help you to pull you out.
希望这些资源能帮助你把你拉出来。
回答by NodeNodeNode
The limitations for Safari (all platforms) are much lower.
Safari（所有平台）的限制要低得多。
For example, I had a 6400x6400px canvas buffer with data drawn onto it. By tracing/ exporting the content and by testing on other browsers, I was able to see that everything was fine. But on Safari, it would skip the drawing of this specific buffer onto my main context.
例如，我有一个 6400x6400 像素的画布缓冲区，上面绘制了数据。通过跟踪/导出内容并在其他浏览器上进行测试，我能够看到一切正常。但是在 Safari 上，它会跳过将此特定缓冲区绘制到我的主上下文中。
