独辟蹊径：逆推Krpano切图算法，实现在浏览器切多层级瓦片图( 二 ) _生活百科

canvas这个就不多介绍了，大家都懂。

6.普通切图（立方体切图）其实切立方体图网上很多现成的方案，难点在于如何切瓦片图。我使用了现成的方案，在我仓库地址中最底部有提及。

原理：将输入的图片使用canvas画出来，然后转为ImageData，通过球体转立方体的算法，将对应像素映射到每一个面上，最终再通过ImageData转回图片。

https://jaxry.github.io/panorama-to-cubemap/
demo中有三个选项：

Liner（柔和的细节）
Cubic（锋利的细节，我选择这一种，与krpano一致）
Lanczos（画质最好，耗时是第二种的3.5倍，太耗时且结果肉眼感知不明显）

7.多分辨率瓦片图算法（重头戏）01.通过krpano切图结果推理多分辨率切图高清的原因一张全景图，可以切出几百上千张碎图，越放大就越清晰，并且初次缩放和旋转场景，可以看到控制台一直在加载图片。
首先，我们来看看krpano切出来的图片的目录结构：
（图一）多分辨率切图：

文章插图
（图二）普通切图：

文章插图
普通切图我们好理解。除了preview.jpg和thumb.jpg，其它以pano_开头的图片都代表立方体其中一个面。
通过对比，我猜测多分辨率每一个文件夹对应立方体每一个面。
为了探究这些碎图是什么东西，我打开Photoshop，将图一中文件夹b->l1里面文件夹的图片都放在画布中，如下图三所示：
图三：

文章插图
紧接着，我把剩下l2、l3文件夹里面的所有图片，按照上文同样的操作，放在Photoshop中把图片合并，惊奇地发现l1、l2、l3这三个文件夹每个文件夹合并的图片都是一样的，除了分辨率不一样以外，分辨率等级：l3 > l2 > l1，层级越高分辨率越高。如下图所示：

文章插图
02.小结krpano切图规律

每一面图片的多个文件夹（l1、l2、l3）代表多张不同分辨率的图片
文件夹名称l1、l2、l3，其中的英文字母l是level的缩写，数字代表图片的层级
每一层级里面的文件夹表示这张图片的第几行，按顺序把每一行都拼起来就可以变成一面完整的图
多分辨率瓦片图高清的原因：普通切图分辨率为2048x2048，而的分辨率切图最高分辨率可以达到3200x3200，分辨率越高肯定越清晰

03.算法思路推理与实现小思路：

每一面的图片我们可以通过普通切图拿到
把每一面的图使用canvas转成不同分辨率的图片，然后逐行对它进行切割

问题：

一张全景图需要分多少层级？
每一层级的分辨率是多少？
每一张瓦片图的最大尺寸和最小尺寸是多少？

为了能找出规律，我制作了非常多不同分辨率的全景图，使用krpano Tools去切图，并根据输出记录不同分辨率的层级、每一层级的分辨率，试图找出他们的规律。
如图所示，这是krpano Tools 1.20.10：

文章插图
从上图中可以发现，每次切图的时候控制台会输出几个参数：

全景图的分辨率
一共多少层级，如图中所示 levels=3，表示有3个层级
每一层级的分辨率，如图中所示，3200x3200 1664x1664 768x768，由高到低

根据这些数据，我制成了一个表格：

文章插图
为了让样本更具参考意义，全景图的分辨率我从1000x500 一直到 60000x30000 。为什么知道了6万就不往上测试了呢？因为我电脑Photoshop的极限就在这里了，没办法输出更高分辨率的图片了，从10个样本中，我依旧可以得出以下规律：

相邻层级分辨率之比约等于 2，波动为0.2
全景图的分辨率与最高层级的分辨率之比为 3.125 ，几乎所有都一样，仅有一个波动为0.012

3.125 这个数值我会把它当成一个突破口，即最高层级图片的分辨 = 全景图分辨率 / 3.125 。

接着我查看vtour-multtires.config文件，即多分辨率切图的配置文件，这是一份krpano Tools默认的配置文件，可以手动去修改切图的配置。一般几乎不会去改动这里，我们团队生产过几十万个场景都没有改过这里，所以默认的配置已经是符合绝大部分使用场景。故，我把其中的配置作为标准来参考。