html - Canvas 绘制图像尺寸错误

Question

我使用两个 html Canvas ，fronendCanvas 对用户可见，是 html DOM 树的一部分，并设置为具有 100% 的窗口宽度和高度，backendCanvas 是在 javascript 代码上创建的，并且是用于包含我需要绘制的巨大图表。

/** FrontendCanvas */
// HTML
<canvas id="canvas"></canvas> 

// JavaScript
frontCanvas.width = window.innerWidth;
frontCanvas.height = window.innerHeight;

// CSS
#canvas {
   display: block;
   background-color: #dddddd;
}

/** BackendCanvas */
// JavaScript
backCanvas = document.createElement('canvas');
backCanvas.width = diagram.maxX;
backCanvas.height = diagram.maxY;

基本上，为了实现平滑的可视化，frontendCanvas 仅显示使用 drawImage 函数在 backendCanvas 中绘制的巨大图像的一部分(用户可以使用鼠标在图表上拖动可视化区域，请参阅示例 Move HTML5 Canvas with a background image ) .

frontCanvas.getContext('2d').drawImage(
    backCanvas,
    (-ix - offsetX),
    (-iy - offsetY),
    (frontCanvas.width),
    (frontCanvas.height),
    0,
    0,
    (frontCanvas.width),
    (frontCanvas.height)
);

当我将 backendCanvas 宽度和高度设置为 15000 时，一切正常，但是当我将其设置为我实际需要的尺寸(宽度 62322 和高度 50946)时，drawImage 不再工作并抛出尺寸错误:

IndexSizeError: Index or size is negative or greater than the allowed amount
(frontCanvas.height)

我的猜测是我已经达到了 Canvas 的最大尺寸并且它已重置，但情况似乎并非如此，因为:

1. Canvas 引用说 Canvas 宽度和高度限制是无符号长整型，因此比我提到的数字大得多；

2. 我在调用drawImage函数之前检查了backendCanvas的大小，它是正确的。

任何帮助将不胜感激!

谢谢。

Answer 1

噢，这些尺寸 (62322 x 50946) 远远超出了 Canvas 的使用范围 - 即使在 2013 年也是如此。::-)

主要浏览器当前支持的最大大小在 6-15000 点之间变化，具体取决于实现情况(几个月前仅为 6-8000)。大多数技术都与实际需要有关，还有硬件加速、内存等。

您要使用的图像的原始大小为 11.83 GB(RGB + alpha，因为 Canvas 仅使用 RGBA)。此外，您必须将源图像存储在内存中的某个位置，然后才能将其绘制到 Canvas 上，这意味着即使在乐趣开始之前，您的内存使用量也已超过 23 GB。这将在大多数计算机上强制进行分页，这将使一切变得非常慢。

这里需要实现的是平铺/缓存/缓冲技术(想想谷歌地图 - 这就是他们平铺 map 的原因)。

对于这个问答网站来说，描述这一点可能有点太宽泛，所以我还建议您查看例如 PanJS3或Leaflet 。免责声明:我不知道这些库，但您至少可以研究它们以了解它们如何处理大图像/ map 。