全景加载图片

2025-12-12 18:09

图片准备 

使用工具,将图片分割为16x8的小图,原图分辨率是8000x4000单图就是500x500

magick.exe 360.jpg -crop 500x500 -quality 95 -set filename:tile "%[fx:page.x/500]_%[fx:page.y/500]" -set filename:orig %t %[filename:orig]_%[filename:tile].jpg

在当前目录下,会生成128张小图片,给后面的框架按需加载

参考https://photo-sphere-viewer.js.org/guide/adapters/equirectangular-tiles.html

前端使用photo-sphere-viewer框架加载

关键配置

    adapter: EquirectangularTilesAdapter,
    panorama:{
        width: 8000,
        cols: 16,
        rows: 8,
        tileUrl: (col, row) => {
            return `/vr-image/yinshi/360_${col}_${row}.jpg`;
        },
    }