html - Canvas drawImage尺寸错误

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 的内存。这将在大多数计算机上强制进行分页，这将使一切变得非常缓慢。

您需要在此处实现的是平铺/缓存/缓冲技术(想想 Google map - 这就是他们平铺 map 的原因)。

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