高分辨率大图像可缩放 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. python爬取猫眼电影Top100榜单的信息

    爬取并写入MySQL中 import pymysql import requests from bs4 import BeautifulSoup headers = { 'User-Agent': ' ...

  2. vuex记录状态

    // actions import { queryProductDetailsById } from '../service' /* * 异步 */ export const addAndGetPro ...

  3. Java/Kotlin 使用Redis模拟发送验证码

    原文地址: Java/Kotlin 使用Redis模拟发送邮件验证码 - Stars-One的杂货小窝 Java中常用语连接Redis的库有lettuce和jredis,一般是推荐lettuce,其具 ...

  4. Sping Security前后端分离两种方案

    前言 本篇文章是基于Spring Security实现前后端分离登录认证及权限控制的实战,主要包括以下四方面内容: Spring Seciruty简单介绍: 通过Spring Seciruty实现的基 ...

  5. centos7无网环境安装docker

    1.下载docker的安装文件 https://download.docker.com/linux/static/stable/x86_64/ 由于公司OpenStack用的docker版本是18.0 ...

  6. 关于关键字extends与implements的不同以及关于接口的详细介绍的文章

    extends与implements的不同 1.在类的声明中,通过关键字extends来创建一个类的子类. 一个类通过关键字implements声明自己使用一个或者多个接口. extends 是继承某 ...

  7. Containerd 入门基础操作

    Containerd 被 Docker.Kubernetes  CRI 和其他一些项目使用 Containerd 旨在轻松嵌入到更大的系统中.Docker 在后台使用 containerd来运行容器. ...

  8. flak_login用法

    基础的信息和全局配置这里就不多说,需要用到再斟酌也可以的.这里也是针对每个模块较为常用的进行解释说明,后期再使用过程中遇到会进行补充. Login_Manager LoginManager是一个类,有 ...

  9. odbe简介

    Odbc简介 今天工作中遇到一个问题,缺少某个数据库驱动程序,百度半天才发现原来室odbc原因,所以,就捎带学习了一下odbc, ODBC数据源中文名称:开放数据库互联英文名称:Open Databa ...

  10. CSS实现单行或者多行文本溢出隐藏并且显示省略号

    一.单行超出显示省略号如果文字超出父元素指定宽度,文字会自动换行,而连续不间断数字和英文字母(没有其他字符)不会自动换行: 详细步骤: 第一步(不换行):white-space:nowrop;(对于连 ...