HTML5 - 画布 - 大图像的优化答案

【问题标题】：HTML5 - Canvas - Optimization for large imagesHTML5 - 画布 - 大图像的优化
【发布时间】：2012-09-16 18:22:26
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

您很准确，大多数提供大图像（如谷歌地图）的应用都是这样工作的。

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

【讨论】：

【解决方案2】：

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

如果用户可以等待，您可以安全地将图像拆分为不同的图块并按需加载。

如果是游戏，最好在游戏开始之前预加载所有内容 - 至少预加载一个关卡，但我不知道它是否包含关卡，我们甚至没有被告知它是否是游戏 :)

【讨论】：

【解决方案3】：

如果不需要立即响应，您也可以使用服务器脚本提取所需的任何较大图像，因此您可以创建一个图像，将其来源设置为

'imageSliceScript.php?x=whatever&y=whatever'

然后将其绘制到画布上，或者将其保留为图像。这样一来，您只能获得当时需要的图像，而不必处理诸如视口跨边缘的多个图块之类的问题。

【讨论】：