高分辨率大图像可缩放 Web 查看器的实践

安装 vips

具体安装步骤请参考libvips Install。

(资料图)

注意，在 windows 11 中安装 v8.14.2 版本后，在运行vips dzsave **.jpg mydz命令时，出现 vips: unknown action "dzsave"报错，解决办法是重装低版本 v8.14.1，因为在 v8.14.2 中 dzsave 功能被移除了，但有可能在后续版本中会添加回来。

安装 pyvips

pip install pyvips

pyvips API 参考文档：pyvips

生成 DZI

import osimport pyvipsvipsbin = r"F:\vips-dev-8.14\bin"add_dll_dir = getattr(os, "add_dll_directory", None)if callable(add_dll_dir):    add_dll_dir(vipsbin)else:    os.environ["PATH"] = os.pathsep.join((vipsbin, os.environ["PATH"]))current_abspath = os.path.dirname(os.path.abspath(__file__))# 打开图像image = pyvips.Image.new_from_file(os.path.join(current_abspath, "bigimage.png"))# 生成 DZIimage.dzsave(os.path.join(current_abspath, "mydz"),            suffix=".jpg", tile_size=512, overlap=1)

dzsave参数说明：

上述代码运行后，将在代码文件目录下生成 mydz.dzi文件和 mydz_fils文件夹。其中，dzsave方法的使用请参考官方文档：pyvips.Image.dzsave。

from flask import Flask, send_from_directoryapp = Flask(__name__)@app.route("/")def static_file(path):    return send_from_directory(".", path)if __name__ == "__main__":    app.run(port=8008)

关于 OpenSeadragon 的使用请参考官方文档 OpenSeadragon。

              <script src="./openseadragon/openseadragon.min.js"></script>            
    <script type="text/javascript">      OpenSeadragon({        id: "contentDiv",        prefixUrl: "openseadragon/images/",        showNavigator: false,        navigatorPosition: "BOTTOM_LEFT",        tileSources: {          Image: {            xmlns: "http://schemas.microsoft.com/deepzoom/2008",            // 生成的 DZI 文件 HTTP 访问路径            Url: "../mydz_files/",            Format: "jpg",            Overlap: "1",            TileSize: "512",            Size: {              Height: "3971",              Width: "73364",            },          },        },      });    </script>  

查看效果：

初始状态

放大状态

关键词：