使用KrpanoToolJS在瀏覽器切圖的實例詳解

更新時間：2022年10月10日 09:53:48 作者：非洲難民

這篇文章主要介紹了使用KrpanoToolJS在瀏覽器切圖的實例詳解,大概是需要在瀏覽器中將全景圖轉為立方體圖、多層級瓦片圖，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、功能介紹

在瀏覽器中將全景圖轉為立方體圖、多層級瓦片圖

備注：

切圖的邏輯、縮略圖、預覽圖均以krpano為標準，如果是使用krpano來開發(fā)全景的，可以直接使用，暫時未開發(fā)自定義切圖的參數，后續(xù)可能會開放。
目前僅支持jpeg/jpg，20000x10000分辨率以內的圖片，當然這已經是覆蓋了80%的使用場景了
切圖速度快于krpano命令行工具
如果需要更高的要求還是可以使用krpano工具，也可以混著使用

如下功能：

生成立方體圖片（6個面）
生成多分辨率瓦片圖（層級根據圖片分辨率自動調節(jié)）
生成場景預覽圖preview.jpg
生成場景縮略圖thumb.jpg
生成krpano代碼：場景代碼、立方體image節(jié)點代碼、多分辨率image節(jié)點代碼（包含簡寫和完整兩種寫法）
生成的圖片和場景，均無水印

二、如何使用

安裝依賴

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節(jié)點的代碼
        tileImage: string; // 多分辨率切圖image節(jié)點的代碼
        shortTileImage: string; // (簡寫)多分辨率切圖image節(jié)點的代碼
    };
}

切圖方法

// 生成立方體圖（6張）、縮略圖、預覽圖
makeCube(file: File): Promise<IConvertPanoResult>;

// 生成多分辨率瓦片圖、縮略圖、預覽圖
makeTiles(file: File): Promise<IConvertPanoResult>;

// 同時生成立方體圖、多分辨率瓦片圖
makeCubeAndTiles(file: File): Promise<IConvertPanoResult>;

到此這篇關于使用KrpanoToolJS在瀏覽器切圖的實例詳解的文章就介紹到這了,更多相關KrpanoToolJS瀏覽器切圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！