HTML5 - 画布 - 优化大图像

Question

我需要建立一个HTML5canvas其中包含一个非常大的图像，可能高达10-15MB。我的第一个想法是将图像分成几个块，当水平移动通过画布时将加载这些块。

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

Answer 1

现在你已经发现了，这种平铺是大多数服务大图像（如谷歌地图）的应用程序的工作原理。

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

Answer 2

它可能是一个好主意，但它取决于您的应用程序。下载图片所需的时间可以被认为是很小的，而且往往是这样，但它确实是不可预测的。因此，根据您的应用程序是静态应用程序（Google地图）还是动态应用程序（游戏），延迟加载可能不是一个好主意。

如果使用可以等待，您可以安全地将您的图片分割成不同的图块并按需加载。

如果是一款游戏，那么最好在它开始前预加载所有内容 - 至少预加载一个关卡，但我不知道它是否包含关卡，我们甚至不知道它是否是游戏： ）

Answer 3

如果不是需要立即响应的东西，你也可以做的是使用服务器脚本来提取你需要的任何一幅较大的图像，所以不要依赖预先定义的图块，而是可以创建图像，设置它的源

“imageSliceScript.php X =任何& Y =什么”

然后绘制到画布上，或者只是把它作为一个图像。这样，您只需获取当前所需图像的一部分，而不必处理诸如视口在边缘处的多个图块之类的问题。