高分辨率大图像可缩放 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. 你可能需要的 6 个 React 开发小技巧

    ​ 这是一个可怕的问题,在React中,我们经常会编写条件语句来显示不同的视图,比如这个简单的例子. const App = () => { return ( <> { loadin ...

  2. JMM内存模型

    ● 说说JVM的主要组成部分以及作用? 类加载器.运行时数据区.执行引擎.本地库接口 类加载器子系统 它主要功能是处理类的动态加载,还有链接,并且在第一次引用类时进行初始化. Loading - 加载 ...

  3. Unity3D中的Attribute详解（三）

    上一篇我们对系统的Attributes进行了MSIL代码的查看,了解到了其本质就是一个类的构造函数.本章我们将编写自己的Attributes. 首先我们定义书的属性代码,如下: [AttributeU ...

  4. 【装饰器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

    简介 装饰器模式(Decorator Pattern)是一种结构型设计模式.将对象放入到一个特殊封装的对象中,为这个对象绑定新的行为,具备新的能力,同时又不改变其原有结构. 如果你希望在无需修改代码的 ...

  5. ARM 详解

    一.ARM 的发展史 ARM 的发展历史可以追溯到 1978 年,当年克里斯·库里(Chris Currry)所任职的公司遭遇财务危机,发展每况愈下,库里在和创始人深入沟通后,决定离职.当时的库里对微 ...

  6. R语言网络数据爬虫之三个问题

    现在大家对爬虫的兴趣不断高涨,R和PYTHON是两个非常有力的爬虫工具.Python倾向于做大型爬虫,与R相比,语法相对复杂,因此Python爬虫的学习曲线会相对陡峭.对于那些时间宝贵,又想从网上获取 ...

  7. TS 导入导出那些事

    前言 最近用 TypeScript 写 npm 包,各种模块.命名空间.全局定义等等扰得我睡不着觉. 我便苦心研究,总结了几个比较冷门的,国内貌似基本上找不到资料的导入导出用法,顺便在其中又插入一些不 ...

  8. VMWare无法从主机向虚拟机复制粘贴

    VMWare无法从主机向虚拟机复制粘贴 问题描述 无法在本机和虚拟机之间实现复制粘贴和文件拖到功能. 系统环境 本机 Windows10 虚拟机 Centos7 解决方法 多次尝试重新安装VMware ...

  9. day64:Linux:nginx模块之限制连接&状态监控&Location/用nginx+php跑项目/扩展应用节点

    目录 1.nginx模块:限制连接 limit_conn 2.nginx模块:状态监控 stub_status 3.nginx模块:Location 4.用nginx+php跑wordpress项目 ...

  10. 脚本：auto_send_tablespace定期发送表空间巡检到邮箱

    简述:周期定时发送表空间到指定邮箱内 1.修改邮箱配置 /etc/mail.rc,具体细节见网上教程 $ vi /etc/mail.rc set from=123456@qq.comset smtp= ...