基於 Web 和 Deep Zoom 的高解析度大圖查看器的實踐

-Advertisement-

# 基於 Web 和 Deep Zoom 的高解析度大圖查看器的實踐高解析度大圖像在 Web 中查看可以使用 Deep Zoom 技術，這是一種用於查看和瀏覽大型高解析度圖像的技術，它可以讓用戶以交互方式瀏覽高解析度大圖像，並且能夠在不影響圖像質量的情況下進行縮放和平移操作。 ## 技術點 ### ...

基於 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 pyvips
```
pyvips 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>

查看效果：

初始狀態
放大狀態

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17448525.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

WPF 入門筆記 - 03 - 樣式基礎及控制項模板

從按鈕、文本框到下拉框、列表框，WPF提供了一系列常用控制項，每個控制項都有自己獨特的特性和用途。通過靈活的佈局容器，如網格、堆棧面板和換行面板，我們可以將這些控制項組合在一起，實現複雜的界面佈局。而通過樣式和模板，我們可以輕鬆地定製控制項的外觀和行為，以符合我們的設計需求。本篇記錄WPF入門需要瞭解的樣式... ...
基於SqlSugar的開發框架循序漸進介紹（31）-- 在查詢介面中實現多表聯合和單表對象的統一處理

在一些複雜的業務表中間查詢數據，有時候操作會比較複雜一些，不過基於SqlSugar的相關操作，處理的代碼會比較簡單一些，以前我在隨筆《基於SqlSugar的開發框架循序漸進介紹（2）-- 基於中間表的查詢處理》介紹過基於主表和中間表的聯合查詢，而往往實際會比這個會複雜一些。本篇隨筆介紹聯合多個表進行... ...
【DNS】功能變數名稱服務 Bind實現

一、功能變數名稱解析過程 DNS功能變數名稱完整解析過程 1、查詢本地 hosts文件解析記錄 2、查詢客戶端本地DNS緩存記錄 3、訪問DNS轉發（緩存）伺服器本地緩存記錄 4、轉發到權威伺服器查詢本地緩存記錄 5、訪問權威伺服器解析記錄 6、權威伺服器迭代查詢 6.1、訪問子域權威伺服器查詢本地緩存記錄 6. ...
ulimit配置含義及使用

# ulimit Linux ulimit命令用於控制shell程式的資源。 ```shell [email protected] 10:41:17 [pwd:~]# ulimit --help ulimit: ulimit [-SHabcdefiklmnpqrstuvxPT ...
微控制器實時操作系統實踐1實時系統介紹

## 01|修改Win用戶名打開運行，輸入cmd，回車；輸入control userpasswords2，回車；點擊屬性，修改用戶名，點擊確定；打開運行，輸入regedit，回車；定位到HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\Cur ...
快速上手kettle（三）壺中可以放些啥？

[TOC](快速上手kettle（三）壺中可以放些啥？) ### 序言快速上手kettle開篇中，我們將kettle比作壺，並對這個壺做了簡單介紹。而上一期中我們實現了①將csv文件通過kettle轉換成excel文件； ②將excel文件通過kettle寫入到MySQL資料庫表中這兩個案例。 ...
Django遷移資料庫編碼錯誤

# mysql編碼錯誤 ![image-20230604115322661](https://img2023.cnblogs.com/blog/2862884/202306/2862884-20230604115422584-1121547495.png) 問題出現在用django的admin組件向 ...
鎖

# **鎖** ## **概述** - **介紹** 鎖是電腦協調多個進程或線程併發訪問某一資源的機制。在資料庫中，除傳統的計算資源（CPU、RAM、I/O）的爭用以外，數據也是一種供許多用戶共用的資源。如何保證數據併發訪問的一致性、有效性是所有資料庫必須解決的一個問題，鎖衝突也是影響資料庫併發訪 ...