# 如何还原krpano全景图 ## 前言 1. 在上一篇文字中介绍了如何去切图以及切图的分类，感兴趣可以去了解一下[【独辟蹊径】逆推Krpano全景切图算法，实现在浏览器切多层级瓦片图](https://juejin.cn/post/7150895121444110344) 2. 当前demo还没有空做，不过看一下教程，应该就懂了 3. 后续会做，web端demo和一个node端（electron应用） ## 切图分类，常用的有2种： 1. 六面体切图，将图片切成前后上下左右 2. 多分辨率切图，将图片切出六面体图，再将每一面的图片切割成瓦片图 ![03普通切图目录.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec9c59850a2a486aa50ff09368f7eba6~tplv-k3u1fbpfcp-watermark.image?)

（六面体切图）

![02多分辨率切图目录结构.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b78f6065c9fc4353a44afc4ff868b416~tplv-k3u1fbpfcp-watermark.image?)

（多分辨率切图）

## 还原图片，整体逻辑 1. 判断图片类型，是六面体图还是瓦片图 2. 如果是瓦片图，先要将瓦片图合成六张六面体图 3. 将六张六面体图，转为全景图 ## 瓦片图合成六面体图如下图所示，咱们可以知道瓦片图转六面体图的逻辑，知道逻辑后，写代码还不简单？ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d50994acefe74c7183c0f57ed36a0e55~tplv-k3u1fbpfcp-watermark.image?) 此时，我们还需要拿到： 1. 这一面的尺寸 = tiledimagewidth x tiledimageheight 2. 每一层级瓦片的标准大小 3. 通过标准大小去计算每张图片的大小和位置我提供2种实现思路： 1. 自己通过掌握的数据拼接：如：使用canvas将图片拼接起来、Python、go、Java等，都一样， 2. 使用krpano官方命令行工具(我先讲这种) ## 使用krpanotools cli 拼接瓦片图 krpano官网有详细使用教程，以及各种参数的释义，[https://krpano.com/docu/tools/#convert](https://krpano.com/docu/tools/#convert) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62ffac3144c1471e9173cb38a4ddabe2~tplv-k3u1fbpfcp-watermark.image?) 瓦片图的XML代码，现在最新的切图方式会将level简写了，但道理都一样，我就以这种方式来讲解： ```xml ... ... ``` ### 主要逻辑 1. 找到krpanotools 可执行文件 2. 拼接执行命令 3. 用krpanotools去执行命令 4. 完成 **krpanotools位置** （我是Mac）如图所示，，无论是1.19版本，还是1.21版本，都能用： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a0c03aab77f4245bd0bc15b0a76af9c~tplv-k3u1fbpfcp-watermark.image?) **拼接命令-全文核心内容，很多人就败在这里：** ```JavaScript // 这是一段JS代码，仅供参考，大家想用什么鬼代码都可以，重在思路 let inputFiles = './test.tiles/%s/l3/%v/l3_%s_%v_%h.jpg' // 在images/level/cube中,拿到url的值 const outputFiles = './pano_b.jpg' // 输出文件的路径 const tiledimagewidth = 3840 // 在images/level中,拿到 const tiledimageheight = 3840 // 在images/level中,拿到 const insize = `${tiledimagewidth}x${tiledimageheight}` const intilesize = 512 // 在images中,拿到tilesize的值 const resize = '2048x2048' // 输出图片的尺寸,最大不要超过[insize] const faceName = 'b' // "b", "d", "f", "l", "r", "u" inputFiles = inputFiles.replaceAll('%s', faceName) // 想要合成那一面,就把"inputFiles"中的 %s 替换成那一面 const cmd = `krpanotools.mac maketiles ${inputFiles} ${outputFiles} -insize=${insize} -intilesize=${intilesize} -insize=${insize} -resize=${resize}` console.log(cmd) // krpanotools.mac maketiles ./test.tiles/b/l3/%v/l3_b_%v_%h.jpg ./pano_b.jpg -insize=3840x3840 -intilesize=512 -insize=3840x3840 -resize=2048x2048 ``` 大家可以在自己电脑上拿一个去测试，通过以上的方式去拼接命令，然后去执行就可以还原一面图片，以此类推依次还原6个面，如图所示，我个人测试的结果： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8a14bad747044e9ea660292a033ab4f6~tplv-k3u1fbpfcp-watermark.image?) ## 将6张立方体图片还原成全景图先给个思路，还没再继续写： 1. 前端：使用OpenGL，glsl着色器去渲染 2. 后端：使用krpanotools工具，可以看官网案例，日后再写未完待续~