Image HTML5-画布-针对大型图像的优化

我需要构建一个

HTML5

canvas

，其中包含一个非常大的图像，可能高达10-15MB。我的第一个想法是将图像分割成几个块，在画布上水平移动时将加载这些块

对这个想法有什么想法吗？好的吗？也许我缺少一些已经实现的优化功能？

这可能是个好主意，但这取决于您的应用程序。下载图像所需的时间可以认为是很短的，而且通常是很短的，但这确实是不可预测的。因此，根据您的应用程序是静态应用程序（谷歌地图）还是动态应用程序（游戏），延迟加载可能是个好主意，也可能不是个好主意

如果使用可以等待，您可以安全地将图像分割为不同的分幅，并根据需要加载它们

---

如果这是一个游戏，你最好在它开始之前预装所有东西——至少预装一个关卡，但我不知道它是否包含关卡，我们甚至还没有被告知它是否是一个游戏：）

你很中意，这种平铺是大多数服务于大型图像（如谷歌地图）的应用程序的工作方式

---

不幸的是，这里没有任何其他聪明的优化。

如果不需要立即响应，那么您也可以使用服务器脚本调出所需的较大图像的任何部分，因此，您可以创建一个图像，而不是依赖预调大小的图像块，将其源设置为

'imageSliceScript.php？x=where&y=where'

---

然后把它画到画布上，或者把它作为一个图像。这样，您就只获得了此时所需的图像片段，而不必处理视口在边缘跨越多个瓷砖的问题

我的应用程序将是一种静态的…因此，我将继续我的想法。但还是要谢谢你的解释