我需要构建一个包含非常大的图像的HTML5画布,可能达到10-15MB。我的第一个想法是将图像分成几个块,在通过画布水平移动时加载这些块。
对于这个想法有何看法?这是一个好主意吗?也许我已经错过了一些已实现的优化特性?
对于这个想法有何看法?这是一个好主意吗?也许我已经错过了一些已实现的优化特性?
你说得对,这种平铺方式是大多数服务于大型图片(如谷歌地图)的应用程序所采用的。
不幸的是,在这里没有其他聪明的优化方法可供使用。
这可能是一个好主意,但这取决于您的应用程序。下载图像所需的时间可能被认为很短,而且通常确实如此,但它真的是不可预测的。因此,根据您的应用程序是静态的(谷歌地图)还是动态的(游戏),懒加载可能是个好主意,也可能不是。
如果用户可以等待,您可以安全地将图像拆分成不同的瓦片,并按需加载它们。
如果是游戏,最好在游戏开始之前预加载所有内容-至少预加载单个级别,但我不知道它是否包含级别,我们甚至没有被告知它是一个游戏 :)
如果不需要立即响应的话,你可以使用服务器脚本来拉取所需的大图像中的任意部分,这样就不必依赖预设大小的瓷砖,而是可以创建一个图像,并将其源设置为
'imageSliceScript.php?x=whatever&y=whatever'
然后将其绘制到画布上,或者只是将其保留为图像。这样,您只在需要的那一刻获取图像的一部分,并且永远不必处理视口跨越边缘的多个瓷砖的问题。