前言

openseadragon是一个工具，里面有很多函数，用于放缩旋转图像导航；

在vs code中打开.html文件，输入<script src='openseadragon.min.js'></script>，即可引用里面的函数；

预览完整程序：

在这里插入图片描述

环境完全搭建

博主是从小白一步一步搭建的环境，直至运行成功的，先仅作为记录。

下载安装微软的deep zoom composer，用于制作可放缩的图片

官网传送门：https://www.microsoft.com/en-us/download/details.aspx?id=24819

在这里插入图片描述

下载完成后，得到.msi文件，双击即可安装

在这里插入图片描述

官网下载openseadragon

官网传送门：http://openseadragon.github.io/

在这里插入图片描述

不用安装，只需将里面的images文件夹和openseadragon.min.js文件，复制粘贴到新建的.html文件所在的同一文件夹里即可:

在这里插入图片描述

官网下载安装vs code

免费，具体安装参考博主文章使用vs code创建第一个入门html【实测成功】

demo实例

一个完整的实例，从图片制作到完整代码到运行

首先使用deep zoom composer转换图像

原图像博主采用：

在这里插入图片描述
打开deep zoom composer软件，根据下面的大佬博主文章进行操作传送门

在这里插入图片描述
得到所需要的转化图，在Exported Data文件夹里：

在这里插入图片描述

写html代码

直接上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>openseadragon_demoo</title>
    <script src='openseadragon.min.js'></script>
</head>
<body>
    <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
</body>

<script type="text/javascript">

OpenSeadragon({
     
     

    id:'openseadragon1',
    
 
    prefixUrl: './images/',
 
    tileSources: {
     
     
 
    Image: {
     
     
 
        xmlns:  'http://schemas.microsoft.com/deepzoom/2009',
 
        Url: './9650255412_11de14e4aa_z_files/',
 
        Overlap: '1',
 
        TileSize: '256',
 
        Format : 'jpg',
 
        Size:{
     
     
 
           Height: '512',
 
              Width:  '768'
 
           }
 
        }
 
    }

})

</script>

</html>

其中：
在这里插入图片描述
所在的文件夹里的内容：

在这里插入图片描述

运行

使用快捷键alt和b，即可在浏览器中打开（前提是vs code里已安装open in brower插件，可参考博主文章使用vs code创建第一个入门html【实测成功】）：

在这里插入图片描述

加入几行代码，可实现导航和旋转的功能

在这里插入图片描述
扩展后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>openseadragon_demoo</title>
    <script src='openseadragon.min.js'></script>
</head>
<body>
    <div id="openseadragon1" style="width: 800px; height: 600px;"></div>
</body>

<script type="text/javascript">

OpenSeadragon({
     
     

    id:'openseadragon1',
    
 
    prefixUrl: './images/',
 
    tileSources: {
     
     
 
    Image: {
     
     
 
        xmlns:  'http://schemas.microsoft.com/deepzoom/2009',
 
        Url: './9650255412_11de14e4aa_z_files/',
 
        Overlap: '1',
 
        TileSize: '256',
 
        Format : 'jpg',
 
        Size:{
     
     
 
           Height: '512',
 
              Width:  '768'
 
           }
 
        }
 
    },

    showNavigator:true,

    // Initial rotation angle
    degrees: 90,
    // Show rotation buttons
    showRotationControl: true,
    // Enable touch rotation on tactile devices
    gestureSettingsTouch: {
     
     
        pinchRotate: true
    }

})

</script>

</html>