openseadragon使用教程，很简单但是搞了一上午

最新推荐文章于 2024-07-16 17:56:11 发布

Fhm123456_

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量2.6k

点赞数 1

分类专栏：工作分享文章标签： javascript 前端框架

本文链接：https://blog.csdn.net/Fhm123456_/article/details/121100555

版权

工作分享专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.首先去openseadragon官方文档，地址：https://openseadragon.github.io/，如图下载在这里插入图片描述
下载完成之后会有一个压缩包openseadragon-bin-2.4.2.zip，将压缩包解压拿到一个文件夹，文件夹里面这两个是需要的
，其他忽略。
2：http://www.softsea.com/download/Deep-Zoom-Composer.html这个网址下载Deep Zoom

按提示安装在自己电脑内就有一个程序：
在这里插入图片描述

这个是程序，使用方法链接如下：https://blog.csdn.net/firstblog/article/details/90633169?spm=1001.2014.3001.5501
3：同上操作之后会拿到文件夹在这里插入图片描述
4：创建一个新的文件夹，将1步骤的红色指标文件与3步骤中的文件放在同一个文件夹中，同时里面创建一个.html文件.
5：把4步骤额的文件放在vscode中

<!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>
    <!-- 将openseadragon.min.js引入 -->
  </head>

  <body>
    <div id="openseadragon1" style="width: 800px; height: 1000px"></div>
  </body>

  <script type="text/javascript">
    OpenSeadragon({
      id: "openseadragon1", //body中挂载的id

      prefixUrl: "./images/", //openseadragon自带的图片也是文件中的路径

      tileSources: {
        Image: {
          xmlns: "http://schemas.microsoft.com/deepzoom/2009",

          Url: "./test/dzc_output_files/", //这里是3步骤中的dzc_output_files文件

          Overlap: "1", //这里是3步骤中xml相同字段给的值，只要打开xml对号入座即可

          TileSize: "256", //这里是3步骤中xml相同字段给的值，只要打开xml对号入座即可

          Format: "jpg", //这里是3步骤中xml相同字段给的值，只要打开xml对号入座即可

          Size: {
            Height: "300", //这里是3步骤中xml相同字段给的值，只要打开xml对号入座即可

            Width: "168", //这里是3步骤中xml相同字段给的值，只要打开xml对号入座即可
          },
        },
      },
    });
  </script>
</html>

右键运行即可
总结：如上操作就可以达到简单使用，后续新增功能也会做个记录

Fhm123456_

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
openseadragon使用教程，很简单但是搞了一上午

1.首先去openseadragon官方文档，地址：https://openseadragon.github.io/，如图下载下载完成之后会有一个压缩包openseadragon-bin-2.4.2.zip，将压缩包解压拿到一个文件夹，文件夹里面这两个是需要的，其他忽略。2：http://www.softsea.com/download/Deep-Zoom-Composer.html这个网址下载Deep Zoom 按提示安装在自己电脑内就有一个程序：，使用链接如下：https://blog.cs
复制链接

扫一扫