使用KrpanoToolJS在浏览器切图的实例详解

npm i @krpano/js-tools

<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>;