Question

我正在使用两个html画布，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中绘制的巨大图像的一部分（用户可以使用鼠标在图表中拖动可视化区域，请参阅示例{{3} }）。

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)

我的猜测是我达到了画布的最大尺寸并重置了，但似乎并非如此：

画布参考说画布宽度和高度限制是无符号长度，因此比我提到的数字大得多;
我在drawImage函数调用之前检查了backendCanvas的大小，它是正确的。

非常感谢任何帮助！

感谢。

Answer 1

Oo，那些尺寸（62322 x 50946）超出了你可以使用的画布 - 即使在2013年。:: - ）

主流浏览器支持的最大电流大小在6-15000点之间，具体取决于实施情况（几个月后只有6-8000）。它与大多数技术的实际需求以及硬件加速，内存等有关。

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

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

对于此Q＆amp; A网站来说，这可能有点过于宽泛，因此我建议您查看例如PanJS3或Leaflet。免责声明：我不了解这些库，但您至少可以研究它们，看看它们如何处理大型图像/地图。

画布drawImage大小错误

1 个答案: