openseadragon实战系列基础篇（有你想要的干货）-优快云博客

本文是openseadragon实战系列的基础篇，主要介绍如何使用openseadragon进行静态图像操作，包括dzi协议的初步介绍、图像源的生成和加载，适合初学者快速上手。后续章节将涵盖options文档翻译、进阶应用、与其他系统的整合等。

序言

如果你正在寻找openseadradgon的相关资料，那么我相信你一定清楚了这个插件的作用，这里就不再赘述了。openseadragon所支持的图像协议可以在官网找到：https://openseadragon.github.io/#examples-and-features，在本系列教程中，所有的图像源使用的是微软的dzi协议。你一定会问dzi协议又是什么鬼，别着急，在最早我开始学习openseadragon时，我也不懂dzi，所以关于dzi协议的介绍和生成图像规则我会在后边的系列中详细介绍，请耐心看下去。此系列是为解决实战、特别是不懂图像的小白而创建，让你不需要懂那些专业名词一样能够使用这个插件做出项目。

我们知道一般的项目都是先经由后端处理，然后将数据返回给前端，再进行展示。但是在openseadragon的官网中例子中只有一个简单的静态操作，当时为了研究如何才能显示出和后端结合的项目，也是花费了很大的功夫。说了这么多你最关心的来了，这个系列到底要介绍什么?

一、openseadragon基础应用（静态操作）

二、openseadragon中viewer的options文档翻译

三、dzi协议图像生成规则

四、openseadragon的进阶应用（结合java工程、阿里文件存储）

五、openseadragon其他属性的使用

六、openseadragon结合第三方插件实现图像颜色过滤（伽马、三通道颜色等）

七、openseadragon标注圆形、矩形、直线、文字【完整demo版】2021/02/17更新

以上就是本系列将要解决的问题，话不多说，我们进入正文

基础应用

根据openseadragon官方案例

<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
<script src="/openseadragon/openseadragon.min.js"></script>
<script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon1",//绑定ID
        prefixUrl: "/openseadragon/images/",//openseadragon自带的一些图标
        tileSources: {
            Image: {
                xmlns:  "http://schemas.microsoft.com/deepzoom/2009",
                Url: root + "/public/images/first/",//图片存放的路径
                Overlap: "0",
                TileSize: "1024",
                Format : "jpg",
                Size:{
                    Height: "38912",
                    Width:  "24704"
                }
            }
        }
    });
</script>

关于这个案例很简单，我已在代码中添加注释，要想运行这个项目也简单，首先去官网https://openseadragon.github.io/#examples-and-features这个地址，把下图所指的压缩包下载下来，然后解压压缩包后，你会得到一个images文件夹和openseadragon的源码

这个images文件夹就是官方案例中prefixUrl属性所需的图标，将openseadragon和images文件夹放入你的工程。之后我们就剩下tileSources没有装载数据源了，如果你没有现成的图片，那么你需要先下载一个工具http://www.microsoft.com/en-us/download/details.aspx?id=24819，这是微软的工具，点击下载即可，安装完成后打开软件，新建一个工程，点击下图所示add image

图片导入后，按下图所示步骤，导出处理后的图片

去你所导出的目录，找到dzc_output_images文件夹

dzc_output_images内有一个文件夹和xml，这个文件夹里的图片就是你所需的图片tileSources图片源了，复制dzc_output_images文件夹里边的文件夹，拷贝到你的工程内，然后打开xml，你会发现tileSources的一些配置，然后将上边的代码对应的位置换成你xml里的内容即可。然后运行项目，你就可以看到openseadragon的案例已成功运行。