画布drawImage与大图像

Question

我想要制作的是某种可滚动的视口，其中加载了一个非常大的图像（如10.000 x 10.000像素或更多），我应该能够在此图像上绘制一些线条/形状。

我可以想到两种方法来绘制图像/允许绘制形状：

• 使用标签绘制图像并在其上方绘制图像大小的画布。
• 使用drawImage（）方法绘制图像并使用画布。

我尝试了两种情况，但是当我加载图像时（在img标签中或使用javascript Image（）对象），它会消耗大约500MB的内存。

我想知道是否有更有效的方法来实现这一目标。

Answer 1

从不永远让用户下载相应大小的图片，除非您绝对必须这样做。

制作图像的100个较小的图块（或附近）并将图块绘制到画布上，仅绘制当前可以看到的图块（如谷歌地图等）。