Krpano：打造全景漫游体验—全景开发（一）

格斗家不爱在外太空沉思

已于 2024-04-16 17:23:11 修改

阅读量3k

点赞数 5

分类专栏： krpano 文章标签：前端 javascript 虚拟现实

于 2024-04-16 17:02:27 首次发布

本文链接：https://blog.csdn.net/m0_59281691/article/details/137831995

版权

本文介绍了如何在前端使用React和Antd组件库，结合后端Koa框架，实现一个网站自动处理用户上传的全景图片，并通过krpano工具进行切图。包括上传功能、krpanotools的命令行操作、配置文件修改以及服务端接口设计，最终将切图结果存储到阿里云OSS并更新数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

前面的文章主要基本介绍了krpano一些元素的用法，从这篇文章开始我们就进入全景开发的实战教学，从全景切图到全景编辑最后到整个全景的预览，前端使用react框架+antd组件库+krpano，后端使用koa来实现一个类似720云全景的制作网站

在之前的文章中都是通过MAKE VTOUR Droplet.exe应用程序来手动切图的，但是对于一个制作网站来说肯定是网站来帮用户实现切图，用户只需要上传全景图片，前端拿到图片再传给后端，通过后端来完成切图，所以步骤是-->用户选择图片切图-->客户端拿到图片后调用接口进行上传-->服务端实现切图-->切图完成

krpano实现切图demo

1.用户选择图片并调用接口上传

上传图片通过Upload组件上传，这里将官方文档的示例直接复制过来

<Upload {
   ...props}>
  <Button type="primary">本地导入</Button>
</Upload>
const props: UploadProps = {
   
    name: 'panos',
    action: `${
     BASE_URL}/upload/panos`,
    headers: {
   
      authorization: localcache.getCacha('token')
    },
    showUploadList: false,
    multiple: true
}