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

一、使用 vips 将高分辨率大图像转换为 DZI

  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。

二、使用 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=8008)

三、使用 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",

            Url: "../mydz_files/",

            Format: "jpg",

            Overlap: "1",

            TileSize: "512",

            Size: {

              Height: "3971",

              Width: "73364",

            },

          },

        },

      });

    </script>

  </body>

</html>

查看效果：

  1. 初始状态

  2. 放大状态

高分辨率大图像可缩放 Web 查看器的实践的更多相关文章

  1. Asp.Net Core写个共享磁盘文件Web查看器

    本篇和大家分享的是一个磁盘文件查看系统,严格来说是使用NetCore写的一个Web系统应用,由于NetCore跨平台特性,我生成了exe的运行包,只需要配置运行电脑ip+端口,即可在浏览器中通过IP+ ...

  2. Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处。用来指定播放器 1 2. <object> 标签用于包含对象，比如图像、音

    Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处.用来指定播放器 1 2. <object> 标签用于包含对象,比如 ...

  3. wpf图片查看器，支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  4. js手写图片查看器（图片的缩放、旋转、拖拽）

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  5. js实现图片查看器（图片的缩放、旋转、拖拽）

    一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...

  6. 在web项目中集成pdf.js的默认查看器

    pdf.jsMozilla开源的一项用于在HTML5平台上显示pdf文档的技术,Mozilla自己的Firefox浏览器也用了pdf.js来预览pdf,可见应该是一个比较成熟稳定的方案(btw,chr ...

  7. Android仿微信朋友圈图片查看器

    转载请注明出处:http://blog.csdn.net/allen315410/article/details/40264551 看博文之前,希望大家先打开自己的微信点到朋友圈中去,细致观察是不是发 ...

  8. 用JQ仿造礼德财富网的图片查看器

    现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...

  9. 用Qt写软件系列一：QCacheViewer(浏览器缓存查看器)

    介绍 Cache技术广泛应用于计算机行业的软硬件领域.该技术既是人们对新技术探讨的结果,也是对当前软硬件计算能力的一种妥协.在浏览器中使用cache技术,可以大幅度提高web页面的响应速度,降低数据传 ...

  10. jQuery 插件 Magnify 开发简介（仿 Windows 照片查看器）

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

随机推荐

  1. 微软开源了一个 助力开发LLM 加持的应用的 工具包 semantic-kernel

    在首席执行官萨蒂亚·纳德拉(Satya Nadella)的支持下,微软似乎正在迅速转变为一家以人工智能为中心的公司.最近微软的众多产品线都采用GPT-4加持,从Microsoft 365等商业产品到& ...

  2. 为自己的博客添加2D虚拟人物

    2020-05-29 在自己申请完并获得了属于自己的博客后,我突然想着为自己的博客添砖加瓦,记起了之前看别人博客时,其充满独具个性,特立独行的风格,让我十分羡慕,最近看到了一个博客风格很有趣,其有趣之 ...

  3. golang pprof监控系列（2） —— memory，block，mutex 使用

    golang pprof监控系列(2) -- memory,block,mutex 使用 大家好,我是蓝胖子. profile的中文被翻译轮廓,对于计算机程序而言,抛开业务逻辑不谈,它的轮廓是是啥呢? ...

  4. ACM-学习记录-DP-1

    DPL_1_A: Coin Changing Problem 每次均有两种选择,即选择当前的,即为在当前状态+1,否则维持原来的T[j+d[i]] #include<iostream> # ...

  5. Django后端 服务器找不到template(路径问题)

    Django后端 服务器找不到template(路径问题) 该代码在本地跑没有任何问题, 但是上传到服务器上报错找不到模板或者模板不存在. 看网页最下方报错(一定要看报错!!)显示路径有问题 问题原因 ...

  6. 动态开点线段树&线段树合并学习笔记

    动态开点线段树 使用场景 \(4 \times n\) 开不下. 值域需要平移(有负数). 什么时候开点 显然,访问的节点不存在时(只会在修改递归时开点). trick 区间里面有负数时,\(mid ...

  7. [Java]排序算法>交换排序>【快速排序】(O(N*logN)/不稳定/N较大/无序/仅顺序存储)

    1 快速排序 1.1 算法思想 快速排序是由冒泡排序改进而得的. 在冒泡排序过程中,只对相邻的2个记录进行比较:因此,每次交换2个相邻记录时,只能消除1个逆序. 若能通过2个(不相邻)记录的1次交换, ...

  8. Nordic nRF52系列/nRF5340硬件设计（一）选型及原理图设计

    Nordic 的BLE系列芯片从第一代的nRF51系列,到第二代的nRF52系列,发展到目前最新的第三代的nRF5340.目前市场中使用最多的nRF52系列一共有七款芯片,它们是:nRF52805.n ...

  9. Unity学习笔记02 —— C#语法

    C#语法 控制台 Console Console.WriteLine(); Console.ReadLine(); 随机数 Random Random random = new Random(); r ...

  10. 四月八号java基础

    1.复合语句:JAVA语言不允许在两个嵌套的复合语句内声明同样的变量 2.注释:1)单行注释// 2)多行注释/*......*/3)/**......*/文件注释 3.else总是与之最近的if结构 ...