高分辨率大图像可缩放 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. ZGC 最新一代垃圾回收器[NO]

    ​ZGC(The Z Garbage Collector)是JDK 11中推出的一款低延迟垃圾回收器,ZGC可以说源自于 Azul System 公司开发的C4收集器[基本不用调优]它的设计目标包括: ...

  2. Redis - 对象结构

    简介 Redis 使用对象存储数据库中的键和值,每当在 Redis 中创建一个新的键值对时,都会创建两个对象:一个是键对象,另一个是值对象. 其中,Redis 的每种对象都由对象结构和对应编码的数据结 ...

  3. 保持唯一性，请停止使用【python3 内置hash() 函数】

    问题: 如图,用hash() 筛重时竟然出现了重复. 如下图: hash字符串时,同一窗口的是一致的,不同窗口结果竟然不同. 原因: python的字符串hash算法并不是直接遍历字符串每个字符去计算 ...

  4. AI开发实践：关于停车场中车辆识别与跟踪

    摘要:本案例我们使用FairMOT进行车辆检测与跟踪.yolov5进行车牌检测.crnn进行车牌识别,在停车场入口.出口.停车位对车辆进行跟踪与车牌识别,无论停车场路线多复杂,小车在你掌控之中! 本文 ...

  5. python调用打印机打印文件，图片，pdf等

    引言 python连接打印机进行打印,可能根据需求的不同,使用不同的函数模块. 如果你只是简单的想打印文档,比如office文档,你可以使用ShellExecute方法,对于微软office的文档.p ...

  6. [MySQL]innodb_flush_log_at_trx_commit与sync_binlog

    1 innodb_flush_log_at_trx_commit 辨析 innodb_flush_log_at_trx_commit = 0 : 每秒将日志缓冲区写入log file,并同时flush ...

  7. pnpm 之降本增效

    作者:京东科技 于振京 受众简介 前端研发工程师 还在为npm i安装大量依赖等待时间较长,npm扁平化node_modules依赖版本冲突在苦恼吗,不用苦恼pnpm为你保驾护航 主要影响:安装依赖包 ...

  8. 基于SpringBoot实现单元测试的多种情境/方法（二）

    本文分享自天翼云开发者社区@<基于SpringBoot实现单元测试的多种情境/方法(二)>,  作者:才开始学技术的小白 1 Mock基础回顾 在上一篇分享中我们详细介绍了简单的.用moc ...

  9. BPM工作流中的一些业务场景

    会签 会签是指两个或多个节点同时审批完,才能到下一节点. 案例: 合同流程 1.媒体合同需要CS.财务两部门共同审批确认:2.两个部门无审批顺序之分:3.需要两个部门全部审批通过后,流程才能往下走. ...

  10. MySQL主从复制原理剖析与应用实践

    vivo 互联网服务器团队- Shang Yongxing MySQL Replication(主从复制)是指数据变化可以从一个MySQL Server被复制到另一个或多个MySQL Server上, ...