高分辨率大图像可缩放 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. Spring 事务——源码分析

    [事务环境搭建工作]:链接注解 @EnableTransactionManagement:在配置类中添加注解@EnableTransactionManagement,便开启了事务功能.此注解也是了解S ...

  2. Linux服务器MySQL操作总结

    目录 1. Navicat连接服务器MySQL 2. 如何查看MySQL用户名和密码 3. 修改MySQL的登录密码 4. 安装MySQL开发包(Centos7版) 错误:error 1045 (28 ...

  3. Kubeadm安装k8s集群升级100年证书时报错：Unable to connect to the server: EOF：求解决方法.

    报错信息: 使用命令时: Kubelet服务报错: 报错情况,在更新完k8s100年证书的时候,到最后重新启动kubelet服务的时候,服务是可以重新启动的,但是kubectl的命令是无法使用的,会等 ...

  4. LeeCode 动态规划（三）

    完全背包问题 题目描述 有 n 件物品和容量为 w 的背包,给你两个数组 weights 和 values,分别表示第 i 件物品的重量和价值,每件物品可以放入多次,求解将哪些物品装入背包可使得物品价 ...

  5. 用 Gaussian Process 建模 state-action 空间相关性，加速 Multi-Fidelity RL

    目录 全文快读 1 intro 3 背景 4 method 4.1 model-based 算法:GP-VI-MFRL 4.2 model-free 算法:GPQ-MFRL 5 experiment ...

  6. Auto-GPT测评：自信、努力、不合格

    这两天,Auto-GPT 爆火 https://github.com/Torantulino/Auto-GPT 它是一款让最强语言模型GPT-4能够自主完成任务的模型,让整个AI圈疯了.它的嘴大突破是 ...

  7. spring boot自动装配、@ConfigurationProperties、@DependsOn、@Import注解

    1.自动装配组件@Autowired和@Resource @Autowired @Autowired 注解属于spring注解 默认为 @Autowired(required=true), requi ...

  8. 突破传统监测模式：业务状态监控HM的新思路

    作者:京东保险 管顺利 一.传统监控系统的盲区,如何打造业务状态监控. 在系统架构设计中非常重要的一环是要做数据监控和数据最终一致性,关于一致性的补偿,已经由算法部的大佬总结过就不在赘述.这里主要讲如 ...

  9. js给元素设置样式

    一.style 利用 "[元素].style.[CSS属性名] = [属性值]" 的方法 1 var Box = document.getElementById('box') 2 ...

  10. MacOS 环境下 VSCode 的 C++ 环境搭建

    编译器安装 编译器可以选择 Clang 或者 GCC,在 MacOS 上 Clang 的安装更为简单一些. Clang(推荐) 打开终端输入命令, clang -v 查看是否已经安装. 如果已经安装, ...