獨辟蹊徑：逆推Krpano切圖算法，實現(xiàn)在瀏覽器切多層級瓦片圖( 五 ) _生活百科

8.利用canvas分割圖片上面我們推算出了算法，得到了這樣的數(shù)據(jù)：
// 層級數(shù)// 每一層級的分辨率let levelConfig = [{level: 1,size: 768,},{level: 2,size: 1600,},{level: 3,size: 3200,},]把一張圖按照一定的規(guī)律風(fēng)格成碎圖，這很簡單，不在這里詳細展開，否則篇幅太長，可以去網(wǎng)上搜索或者我到時候單獨寫個文章。
9.如何在生成目錄結(jié)構(gòu)和下載？大家在使用我的DEMO的時候可以發(fā)現(xiàn)，你傳一張全景圖上去，我可以在瀏覽器給你直接下載整個壓縮包，并且里面已經(jīng)分好層級和目錄結(jié)構(gòu) 。
如圖所示，這是我在瀏覽器生成的：

文章插圖
01.JSZip

這時候，我給大家推薦一個非常好用的瀏覽器壓縮與解壓工具JSZip，官方文檔。效率高，速度快，壓縮2G以內(nèi)的非常快，有一次我壓縮3700張圖片，每張1m，這是內(nèi)存就爆滿了，不過這種極限條件下一般遇不到，解決方法也很簡單，分塊上傳。
他可以讓我們很方便的去壓縮文件上傳到服務(wù)器，在前端壓縮文件再傳到后端的優(yōu)勢是可以極大減少請求數(shù)量，比如上傳1000張需要1000個請求，壓縮成一個文件僅需要一個請求，并且大文件上傳速度比傳碎文件速度快。
做這個demo遇到很多問題：
- Mac上unix可執(zhí)行文件壓縮就再解壓，就不是可執(zhí)行文件了，因為在Mac中可執(zhí)行文件其實就是可以使用普通文稿去生成，暫時無解；
- 在vite構(gòu)建工具中，如果文件放到了assets中，打包之后的文件會帶上hash，導(dǎo)致場景無法預(yù)覽，如果放在public中又無法使用import，巧妙的解決方法：把所有需要放在assets中的打包成一個壓縮包，單獨導(dǎo)入這個壓縮包，再把它解壓，最終合并到zip實例中去；
- ...

02.file-saver下載的話，我也推薦一個好用的庫，file-saver，源碼鏈接。下載文件其實很簡單，但是如果有非常好用、穩(wěn)定的庫，那直接用就得了，不用自己寫。

在早期，關(guān)于文件的操作，我都是交給后端來處理，我調(diào)接口。但現(xiàn)在不一樣，這兩個庫給了我無限的想象空間，很多東西我可以在前端去組裝去做，然后再統(tǒng)一給到后端。

10.生成預(yù)覽圖 preview.jpg

前面最核心都做完了，這個小圖片豈能難道我？果不其然！！！

進入場景前會先加載預(yù)覽圖，等場景圖片加載完后才顯示原圖，這樣可以提升場景加載速度并且不會耗費太多資源。
預(yù)覽圖如下，是一張分辨率為256x1536的長條圖。它生成的方式是立方體的六個面，按照「左、前、右、后、上、下」，自上而下拼接成。

文章插圖
我就是這樣去合成的，我測試的時候把場景image節(jié)點隱藏掉，僅加載預(yù)覽圖，發(fā)現(xiàn)沒問題很完美。
錯就錯在我是一個特別細心的人，如下圖，我發(fā)現(xiàn)我合成的圖片體積有221kb，而krpano才77kb，體積整整比它大了三倍啊。這里面到底暗藏了什么玄機？