javascript - 带有大图像的画布drawImage

Question

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

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

• 使用标签绘制图像并在其上方绘制图像大小的画布。
• 使用 drawImage() 方法绘制图像，只需使用画布即可。

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

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

Answer 1

除非万不得已，否则永远不要让用户下载这么大的图像。

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