快捷導(dǎo)航

js前端加載超大圖片(100M以上)實(shí)現(xiàn)秒開(kāi)的最佳解決方案

更新時(shí)間：2023年10月08日 10:32:15 作者：vjmap

前端加載超大圖片時(shí),一般可以采取圖片壓縮,圖片分割,預(yù)加載等措施,而對(duì)于幾百M(fèi)或上G的大圖而言,不管對(duì)圖片進(jìn)行怎么優(yōu)化或加速處理,要實(shí)現(xiàn)秒開(kāi)也是不太可能的事情,所以本文小編將給大家介紹如何對(duì)大圖進(jìn)行分割,在前端進(jìn)行拼接實(shí)現(xiàn)秒開(kāi),需要的朋友可以參考下

前言

前端加載超大圖片時(shí)，一般可以采取以下措施實(shí)現(xiàn)加速：

圖片壓縮：將圖片進(jìn)行壓縮可以大幅減小圖片的大小，從而縮短加載時(shí)間。壓縮圖片時(shí)需要注意保持圖片質(zhì)量，以免影響圖片顯示效果。
圖片分割：將超大圖片分割成多個(gè)小圖塊進(jìn)行加載，可以避免一次性加載整個(gè)圖片，從而加快加載速度。這種方式需要在前端實(shí)現(xiàn)圖片拼接，需要確保拼接后的圖片無(wú)縫銜接。
CDN 加速：使用 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）可以將圖片緩存在離用戶(hù)更近的節(jié)點(diǎn)上，從而加速圖片加載速度。如果需要加載的圖片是靜態(tài)資源，可以將其存儲(chǔ)在 CDN 上，以便快速訪(fǎng)問(wèn)。
懶加載：懶加載是一種圖片延遲加載的方式，即當(dāng)用戶(hù)瀏覽到需要加載的圖片時(shí)才進(jìn)行加載，可以有效避免一次性加載大量圖片而導(dǎo)致頁(yè)面加載速度緩慢。
WebP 格式：使用 WebP 格式可以將圖片大小減小到 JPEG 和 PNG 的一半以下，從而加快圖片加載速度。
HTTP/2：使用 HTTP/2 協(xié)議可以并行加載多個(gè)圖片，從而加快頁(yè)面加載速度。
預(yù)加載：預(yù)加載是在頁(yè)面加載完畢后，提前加載下一步所需要的資源。在圖片加載方面，可以在頁(yè)面加載完畢后提前加載下一個(gè)需要顯示的圖片，以便用戶(hù)快速瀏覽。

而對(duì)于幾百M(fèi)或上G的大圖而言，不管對(duì)圖片進(jìn)行怎么優(yōu)化或加速處理，要實(shí)現(xiàn)秒開(kāi)也是不太可能的事情。而上面介紹的第二條“圖像分割切片”是最佳解決方案。下面介紹下如何對(duì)大圖進(jìn)行分割，在前端進(jìn)行拼接實(shí)現(xiàn)秒開(kāi)。

圖像切片原理介紹

圖像切片是指將一張大圖分割成若干個(gè)小圖的過(guò)程，以便于存儲(chǔ)和處理。圖像切片常用于網(wǎng)絡(luò)地圖、瓦片地圖、圖像拼接等應(yīng)用中。

切片原理主要包括以下幾個(gè)步驟：

定義切片大?。菏紫刃枰x每個(gè)小圖的大小，一般情況下是正方形或矩形。
計(jì)算切片數(shù)量：根據(jù)定義的切片大小，計(jì)算原始圖像需要被切成多少個(gè)小圖。計(jì)算公式為：切片數(shù)量 = 原始圖像寬度 / 切片寬度 × 原始圖像高度 / 切片高度。
切割圖像：按照計(jì)算出的切片數(shù)量，將原始圖像分割成相應(yīng)數(shù)量的小圖。可以使用圖像處理庫(kù)或自己編寫(xiě)代碼實(shí)現(xiàn)。
存儲(chǔ)切片：將切割后的小圖存儲(chǔ)到磁盤(pán)上，可以使用常見(jiàn)的圖片格式，如JPEG、PNG等。
加載切片：在需要顯示切片的地方，根據(jù)需要加載相應(yīng)的小圖，組合成完整的圖像。

使用圖像切片可以降低處理大圖像的復(fù)雜度，同時(shí)也能夠提高圖像的加載速度，使得用戶(hù)可以更快地查看圖像的細(xì)節(jié)。圖像切片廣泛應(yīng)用于需要處理大圖像的場(chǎng)景，能夠提高圖像處理和顯示效率，同時(shí)也能夠提高用戶(hù)的體驗(yàn)。

實(shí)現(xiàn)

先上效果圖

上傳打開(kāi)圖形

先上傳大圖，至后臺(tái)進(jìn)行切片處理, 上傳相關(guān)代碼為：

async onChangeFile(file) {
            try {
                message.info('文件上傳中，請(qǐng)稍候...')
                this.isSelectFile = false;
                this.uploadMapResult = await svc.uploadMap(file.raw);
                if (this.uploadMapResult.error) {
                    message.error('上傳圖形失敗!' + this.uploadMapResult.error)
                    return
                }
                this.form.mapid = this.uploadMapResult.mapid;
                this.form.uploadname = this.uploadMapResult.uploadname;
                this.maptype = this.uploadMapResult.maptype || '';
                this.dialogVisible = true;
            } catch (error) {
                console.error(error);
                message.error('上傳圖形失敗!', error)
            }
        }

如果需要上傳后對(duì)圖像進(jìn)行處理，可以新建一個(gè)cmd.txt文件，把處理的命令寫(xiě)進(jìn)文件中，然后和圖像一起打包成zip上傳。

如需要把1.jpg,2.jpg拼接成一個(gè)新的圖片m1.png再打開(kāi),cmd.txt的寫(xiě)法如下：

join
1.jpg
2.jpg
m1.png
horizontal

再把1.jpg,2.jpg,cmd.txt三個(gè)文件打包成zip文件上傳即可

打開(kāi)圖像相關(guān)代碼

async onOpenMap() {
            try {
                let mapid = this.form.mapid;
                let param = {
                    ...this.uploadMapResult,
                    // 圖名稱(chēng)
                    mapid: this.form.mapid,
                    // 上傳完返回的fileid
                    fileid: this.uploadMapResult.fileid,
                    // 上傳完返回的文件名
                    uploadname: this.form.uploadname,
                    // 地圖打開(kāi)方式
                    mapopenway: this.form.openway === "直接打開(kāi)圖形" ? vjmap.MapOpenWay.Memory : vjmap.MapOpenWay.GeomRender,
                    // 如果要密碼訪(fǎng)問(wèn)的話(huà)，設(shè)置秘鑰值
                    secretKey: this.form.isPasswordProtection ? svc.pwdToSecretKey(this.form.password) : undefined,
                    style: vjmap.openMapDarkStyle(),// div為深色背景顏色時(shí)，這里也傳深色背景樣式
                    // 圖像類(lèi)型設(shè)置地圖左上角坐標(biāo)和分辨率
                    imageLeft: this.form.imageLeft ? +this.form.imageLeft : undefined,
                    imageTop: this.form.imageTop ? +this.form.imageTop : undefined,
                    imageResolution: this.form.imageResolution ? +this.form.imageResolution : undefined,
                }
                let isVectorStyle = this.form.openway === "存儲(chǔ)后渲染矢量";
                await openMap(param, isVectorStyle);
            } catch (error) {
                console.error(error);
                message.error('打開(kāi)圖形失敗!', error)
            }
        }