画布drawImage大小错误 [英] Canvas drawImage size error
问题描述
我正在使用两个html画布，fronendCanvas对用户可见，并且是html DOM树的一部分，并且设置为具有100％的窗口宽度和高度，backendCanvas是在javascript代码上创建的，并且
I’m using two html canvas, the fronendCanvas is visible to the users and is part of the html DOM tree and is set to have 100% of the window width and height, the backendCanvas is created on the javascript code and is used to contain the huge diagram that I need to draw.
/** 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仅显示在backendCanvas中绘制的庞大图像的一部分使用drawImage函数（用户可以使用鼠标在图表上拖动可视化区域，请参见示例使用背景图片移动HTML5画布）。
Basically, to have a smooth visualisation the frontendCanvas only shows a part of the huge image drawn in the backendCanvas using the drawImage function (user can use the mouse to drag the visualisation area across the diagram, see the example 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不再起作用并抛出大小错误：
When I set the backendCanvas width and height to 15000 everything works fine, but when I set it to the size that I actually need, width 62322 and height 50946, somehow the drawImage doesn’t work any more and throws the size error:
IndexSizeError: Index or size is negative or greater than the allowed amount
(frontCanvas.height)
我的猜测是我达到了画布的最大大小，并且已将其重置，但事实并非如此，因为：
My guess would be that I’m reaching the maximum size of the canvas and it’s reseted, but it doesn’t seem the case because:
-
画布参考资料说画布的宽度和高度限制是无符号的，因此比我提到的数字大得多；
the canvas reference says that the canvas width and height limit is an unsigned long, therefore much bigger than the numbers that I mentioned;
我在drawImage函数调用之前检查了backendCanvas的大小，它是正确的。
I checked the size of the backendCanvas right before the drawImage function call and it is correct.
任何帮助都是非常有用的
Any help would be very much appreciated!
谢谢。
推荐答案
Oo，tho se大小（62322 x 50946）超出了画布的使用范围-即使在2013年。::-）
Oo, those sizes (62322 x 50946) are way outside what you can use with canvas - even in 2013. ::-)
主要浏览器中当前支持的最大大小有所不同介于6-15000点之间，具体取决于实施方式（几个月后仅返回6-8000）。它与大多数技术以及硬件加速，内存等的实际需求有关。
The max current supported size in the major browsers vary between some 6-15000 points depending on implementation (a few months back only 6-8000). It is related to actual need with most techniques as well as hardware acceleration, memory etc.
您要使用的图像的原始大小为11.83 GB（RGB + alpha）因为画布仅使用RGBA）。此外，您必须将源图像存储在内存中的某个位置，然后才能将其绘制到画布上，这意味着您甚至在开始娱乐之前就已经占用了23 GB以上的内存。
The raw size of the image you want to use is 11.83 GB (RGB + alpha as canvas uses RGBA only). In addition you will have to store the source image somewhere in memory before you can paint it to canvas which means you are up in 23+ GB memory usage even before the fun begin. This will force paging on most computers which will make everything very slow.
您需要在这里实现的是平铺/缓存/缓冲技术（想想Google Maps-这就是为什么他们平铺了他们的地图。）
What you need to implement here is tiling/caching/buffering technique (think Google maps - this is why they tile their maps).
描述此问题对于本问与答站点可能有点太宽泛，因此我也建议您看一下 PanJS3 或小叶。免责声明：我不知道这些库，但是您至少可以研究它们，以了解它们如何处理大型图像/地图。
Describing this is perhaps a bit too broad for this Q&A site so I can also suggest you look at for example PanJS3 or Leaflet. Disclaimer: I don't know these libraries but you can at least study them to see how they deal with large images/maps.
这篇关于画布drawImage大小错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
