如何使用KrpanoToolJS在瀏覽器切圖

1. 框架DEMO
2. 框架源碼地址
3. 【獨(dú)辟蹊徑】逆推Krpano切圖算法，實(shí)現(xiàn)在瀏覽器切多層級(jí)瓦片圖

一、功能介紹

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

備注：

尚義網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

如下功能：

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

二、如何使用

安裝依賴

npm i @krpano/js-tools

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

切圖的返回值

// result對(duì)象
interface IConvertPanoResult {
    dirName: string;  // 生成根目錄文件夾名稱
    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)寫)多分辨率切圖image節(jié)點(diǎn)的代碼
    };
}

切圖方法

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

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

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