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

1.首先去openseadragon官方文档,地址:https://openseadragon.github.io/,如图下载openseadragon使用教程,很简单但是搞了一上午_第1张图片
下载完成之后会有一个压缩包openseadragon-bin-2.4.2.zip,将压缩包解压拿到一个文件夹,文件夹里面这两个是需要的openseadragon使用教程,很简单但是搞了一上午_第2张图片
,其他忽略。
2:http://www.softsea.com/download/Deep-Zoom-Composer.html这个网址下载Deep Zoom openseadragon使用教程,很简单但是搞了一上午_第3张图片

按提示安装在自己电脑内就有一个程序:
openseadragon使用教程,很简单但是搞了一上午_第4张图片

这个是程序,使用方法链接如下:https://blog.csdn.net/firstblog/article/details/90633169?spm=1001.2014.3001.5501
3:同上操作之后会拿到文件夹openseadragon使用教程,很简单但是搞了一上午_第5张图片
4:创建一个新的文件夹,将1步骤的红色指标文件与3步骤中的文件放在同一个文件夹中,同时里面创建一个.html文件.openseadragon使用教程,很简单但是搞了一上午_第6张图片
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>

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

你可能感兴趣的:(工作分享,javascript,前端框架)