如何使用KrpanoToolJS在浏览器切图

  • 如何使用KrpanoToolJS在浏览器切图已关闭评论
  • 22 次浏览
  • A+
所属分类:Web前端
摘要

备注:如下功能:


如何使用KrpanoToolJS在浏览器切图

  1. 框架DEMO
  2. 框架源码地址
  3. 【独辟蹊径】逆推Krpano切图算法,实现在浏览器切多层级瓦片图

一、功能介绍

在浏览器中将全景图转为立方体图、多层级瓦片图

备注:

  • 切图的逻辑、缩略图、预览图均以krpano为标准,如果是使用krpano来开发全景的,可以直接使用,暂时未开发自定义切图的参数,后续可能会开放。
  • 目前仅支持jpeg/jpg20000x10000分辨率以内的图片,当然这已经是覆盖了80%的使用场景了
  • 切图速度快于krpano命令行工具
  • 如果需要更高的要求还是可以使用krpano工具,也可以混着使用

如下功能:


  1. 生成立方体图片(6个面)
  2. 生成多分辨率瓦片图(层级根据图片分辨率自动调节)
  3. 生成场景预览图preview.jpg
  4. 生成场景缩略图thumb.jpg
  5. 生成krpano代码:场景代码、立方体image节点代码、多分辨率image节点代码(包含简写和完整两种写法)
  6. 生成的图片和场景,均无水印

二、如何使用

安装依赖

npm i @krpano/js-tools 

切图,示例:在vue中的使用:

<template>     <input type="file" name="test" @change="onFileChange" accept="image/jpeg"> </template>  <script>  // (可选)用于下载文件 import FileSaver from 'file-saver' // 导入 import KrpanoToolJS from '@krpano/js-tools'  export default {     methods: {         onFileChange(e) {             const file = e.target.files[0]             if (!file) return                          const krpanoTool = new KrpanoToolJS()             krpanoTool.makeTiles(file).then(result => {                 // result 的具体值看下面介绍                 // 可选,可以使用FileSaver,把内容下载下来                 FileSaver.saveAs(result.content)             })         },     } } </script>  

切图的返回值

// result对象 interface IConvertPanoResult {     dirName: string;  // 生成根目录文件夹名称     content: Blob; // 场景图片、缩略图、预览图 的Blob文件,可以用于上传到后台或者下载到本地     duration: string | number; // 单次切图时长     code: {  // 代码         scene: string;  // 整个场景的代码         cubeImage: string; // 立方体切图image节点的代码         tileImage: string; // 多分辨率切图image节点的代码         shortTileImage: string; // (简写)多分辨率切图image节点的代码     }; } 

切图方法

// 生成立方体图(6张)、缩略图、预览图 makeCube(file: File): Promise<IConvertPanoResult>;  // 生成多分辨率瓦片图、缩略图、预览图 makeTiles(file: File): Promise<IConvertPanoResult>;  // 同时生成立方体图、多分辨率瓦片图 makeCubeAndTiles(file: File): Promise<IConvertPanoResult>;