快捷導(dǎo)航

使用KrpanoToolJS在瀏覽器切圖的實(shí)例詳解

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

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

一、功能介紹

在瀏覽器中將全景圖轉(zhuǎn)為立方體圖、多層級(jí)瓦片圖

備注：

切圖的邏輯、縮略圖、預(yù)覽圖均以krpano為標(biāo)準(zhǔn)，如果是使用krpano來(lái)開(kāi)發(fā)全景的，可以直接使用，暫時(shí)未開(kāi)發(fā)自定義切圖的參數(shù)，后續(xù)可能會(huì)開(kāi)放。
目前僅支持jpeg/jpg，20000x10000分辨率以?xún)?nèi)的圖片，當(dāng)然這已經(jīng)是覆蓋了80%的使用場(chǎng)景了
切圖速度快于krpano命令行工具
如果需要更高的要求還是可以使用krpano工具，也可以混著使用

如下功能：

生成立方體圖片（6個(gè)面）
生成多分辨率瓦片圖（層級(jí)根據(jù)圖片分辨率自動(dòng)調(diào)節(jié)）
生成場(chǎng)景預(yù)覽圖preview.jpg
生成場(chǎng)景縮略圖thumb.jpg
生成krpano代碼：場(chǎng)景代碼、立方體image節(jié)點(diǎn)代碼、多分辨率image節(jié)點(diǎn)代碼（包含簡(jiǎn)寫(xiě)和完整兩種寫(xiě)法）
生成的圖片和場(chǎng)景，均無(wú)水印

二、如何使用

安裝依賴(lài)

npm i @krpano/js-tools

切圖，示例：在vue中的使用：

<template>
    <input type="file" name="test" @change="onFileChange" accept="image/jpeg">
</template>

<script>

// （可選）用于下載文件
import FileSaver from 'file-saver'
// 導(dǎo)入
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，把內(nèi)容下載下來(lái)
                FileSaver.saveAs(result.content)
            })
        },
    }
}
</script>

切圖的返回值

// result對(duì)象
interface IConvertPanoResult {
    dirName: string;  // 生成根目錄文件夾名稱(chēng)
    content: Blob; // 場(chǎng)景圖片、縮略圖、預(yù)覽圖 的Blob文件，可以用于上傳到后臺(tái)或者下載到本地
    duration: string | number; // 單次切圖時(shí)長(zhǎng)
    code: {  // 代碼
        scene: string;  // 整個(gè)場(chǎng)景的代碼
        cubeImage: string; // 立方體切圖image節(jié)點(diǎn)的代碼
        tileImage: string; // 多分辨率切圖image節(jié)點(diǎn)的代碼
        shortTileImage: string; // (簡(jiǎn)寫(xiě))多分辨率切圖image節(jié)點(diǎn)的代碼
    };
}

切圖方法

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

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

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

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