基于 Web 和 Deep Zoom 的高分辨率大图查看器的实践
高分辨率大图像可缩放 Web 查看器的实践
基于 Web 和 Deep Zoom 的高分辨率大图查看器的实践
高分辨率大图像在 Web 中查看可以使用 Deep Zoom 技术，这是一种用于查看和浏览大型高分辨率图像的技术，它可以让用户以交互方式浏览高分辨率大图像，并且能够在不影响图像质量的情况下进行缩放和平移操作。
技术点
1、Deep Zoom 技术
Deep Zoom 是微软开发的一种技术，用于高效地传输和查看图像。它允许用户在高分辨率大图像或大量图像集合中进行平移和缩放。它通过仅下载正在查看的区域（或在显示分辨率上下载）来减少初始加载所需的时间。随着用户的平移或缩放，后续区域将被下载。
以下是一些关于 Deep Zoom 交互方式查看高分辨率图像技术的知识点：
-
Deep Zoom 技术基于“金字塔式”（pyramidal）图像结构，它将原始高分辨率图像分成多个分辨率级别，每个级别都是原始图像的缩小版本。这种结构允许 Deep Zoom 在不失真地缩放大图像时，只加载所需的图像分块。
-
Deep Zoom 技术基于 Deep Zoom Composer 和 Microsoft Silverlight 软件，用于创造和浏览基于图像的收藏品，例如地图、照片和艺术品等。
-
Deep Zoom 技术允许用户通过鼠标或手势进行缩放和平移操作，以便在大图像中查看细节。它还可以与其他交互和导航功能结合使用，例如缩略图、搜索和标记等。
-
Deep Zoom 技术支持多种图像格式，包括 JPEG、PNG 和 TIFF 等。它还可以与其他技术和平台结合使用，例如地图服务和 GIS 应用程序等。
2、DZI 格式
DZI 格式是 Deep Zoom Image 格式的缩写，是一种用于存储和展示高分辨率图像的格式。DZI 格式是基于“金字塔式”（pyramidal）图像结构的，它将原始高分辨率图像分成多个分辨率级别，每个级别都是原始图像的缩小版本。这种结构允许 Deep Zoom 在不失真地缩放大图像时，只加载所需的图像分块。
DZI 格式通常由 Deep Zoom Composer 软件生成，该软件可以将任何大型图像转换为 DZI 格式，并生成所需的图像分块。这些图像分块以及其他相关的元数据信息被打包成一个或多个.DZI 文件，然后可以通过网络传输到客户端，供使用 Deep Zoom 技术的应用程序使用。
DZI 格式除了可以在 Deep Zoom Composer 中使用外，还可以在其他 Deep Zoom 应用程序中使用，例如在基于 Silverlight 或 JavaScript 的 Deep Zoom 浏览器应用程序中。此外，DZI 格式还支持多种图像格式，包括 JPEG、PNG 和 TIFF 等，并且可以与其他技术和平台结合使用，例如地图服务和 GIS 应用程序等。
DZI 格式是一种灵活、高效的图像格式，可用于存储和展示高分辨率图像，并且在 Deep Zoom 技术中发挥着重要的作用。
一、使用 VIPS 将高分辨率大图像转换为 DZI 文件
以下是几种可以生成 DZI 文件的工具：
- Deep Zoom Composer：这是一款免费的 Windows 应用程序，可以将高分辨率图像转换为 DZI 格式，并生成所需的图像分块和元数据信息。Deep Zoom Composer 提供了用户友好的图形界面，可以轻松地对图像进行拖放、缩放和裁剪等操作，并支持多种输出选项和参数设置。
- VIPS：这是一个基于开源技术的图像处理库，可以将原始图像转换为 DZI 格式并生成所需的图像分块和元数据。VIPS 支持多种图像格式，包括 JPEG、PNG 和 TIFF 等，并且具有高度定制化的功能和 API。
以下以 VIPS 作为生成 DZI 文件的工具进行实践：
-
安装 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 pyvipspyvips API 参考文档：pyvips
-
生成 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)dzsave参数说明：- 第一个参数为 DZI 文件夹的路径，将在此处生成 DZI 文件。
- suffix：生成的 DZI 图像文件的后缀名。
- tile_size：DZI 图像的图块大小。
- overlap：DZI 图像的图块之间的重叠区域大小。
上述代码运行后，将在代码文件目录下生成
mydz.dzi文件和mydz_fils文件夹。其中，dzsave方法的使用请参考官方文档：pyvips.Image.dzsave。
二、使用 flask 为 DZI 提供 HTTP 服务
from flask import Flask, send_from_directory
app = Flask(__name__)
@app.route('/<path:path>')
def static_file(path):
return send_from_directory('.', path)
if __name__ == '__main__':
app.run(port=80)
三、使用 OpenSeadragon 实现 Web 查看器
关于 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",
// 生成的 DZI 文件 HTTP 访问路径
Url: "/mydz_files/",
Format: "jpg",
Overlap: "1",
TileSize: "512",
Size: {
Height: "3971",
Width: "73364",
},
},
},
});
</script>
</body>
</html>
查看效果：
-
初始状态
-
放大状态
