如何使用KrpanoToolJS在瀏覽器切圖
- 框架DEMO
- 框架原始碼地址
- 【獨辟蹊徑】逆推Krpano切圖演算法，實作在瀏覽器切多層級瓦片圖
一、功能介紹
在瀏覽器中將全景圖轉為立方體圖、多層級瓦片圖
備注：
- 切圖的邏輯、縮略圖、預覽圖均以krpano為標準，如果是使用krpano來開發全景的，可以直接使用，暫時未開發自定義切圖的引數，后續可能會開放，
- 目前僅支持jpeg/jpg，20000x10000解析度以內的圖片，當然這已經是覆寫了80%的使用場景了
- 切圖速度快于krpano命令列工具
- 如果需要更高的要求還是可以使用krpano工具，也可以混著使用
如下功能：
- 生成立方體圖片（6個面）
- 生成多解析度瓦片圖（層級根據圖片解析度自動調節）
- 生成場景預覽圖preview.jpg
- 生成場景縮略圖thumb.jpg
- 生成krpano代碼：場景代碼、立方體image節點代碼、多解析度image節點代碼（包含簡寫和完整兩種寫法）
- 生成的圖片和場景，均無水印
二、如何使用
安裝依賴
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>;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/511975.html
標籤：其他
上一篇：帶你認識什么是“回流重繪”
下一篇：win7升級到win10系統后，node13升級為node16，node版本node-sass版本與不匹配，導致出現npm ERR! ERESOLVE could not resolve