高分辨率大图像可缩放 Web 查看器的实践
阅读原文时间:2023年08月09日阅读:2

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

  1. 安装 vips

    具体安装步骤请参考libvips Install

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

  2. 安装 pyvips

    pip install pyvips

    pyvips API 参考文档:pyvips

  3. 生成 DZI

    import os
    import pyvips
    
    vipsbin = 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'))
    
    # 生成 DZI
    image.dzsave(os.path.join(current_abspath, 'mydz'),
                suffix='.jpg', tile_size=512, overlap=1)

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

    from flask import Flask, send_from_directory

    app = Flask(name)

    @app.route('/')
    def static_file(path):
    return send_from_directory('.', path)

    if name == 'main':
    app.run(port=8008)

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Big Image Viewer</title>
    <script src="./openseadragon/openseadragon.min.js"></script>
    <style type="text/css">
      html,
      body,
      .openseadragon-ctr {
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: #111;
      }
    </style>
  </head>

  <body>
    <div id="contentDiv" class="openseadragon-ctr"></div>

    <script type="text/javascript">
      OpenSeadragon({
        id: "contentDiv",
        prefixUrl: "openseadragon/images/",
        showNavigator: false,
        navigatorPosition: "BOTTOM_LEFT",
        tileSources: {
          Image: {
            xmlns: "http://schemas.microsoft.com/deepzoom/2008",
            Url: "../mydz_files/",
            Format: "jpg",
            Overlap: "1",
            TileSize: "512",
            Size: {
              Height: "3971",
              Width: "73364",
            },
          },
        },
      });
    </script>
  </body>
</html>

查看效果:

  1. 初始状态

  2. 放大状态