如果你正在寻找openseadradgon的相关资料，那么我相信你一定清楚了这个插件的作用，这里就不再赘述了。openseadragon所支持的图像协议可以在官网找到：https://openseadragon.github.io/#examples-and-features，在本系列教程中，所有的图像源使用的是微软的dzi协议。你一定会问dzi协议又是什么鬼，别着急，在最早我开始学习openseadragon时，我也不懂dzi，所以关于dzi协议的介绍和生成图像规则我会在后边的系列中详细介绍，请耐心看下去。此系列是为解决实战、特别是不懂图像的小白而创建，让你不需要懂那些专业名词一样能够使用这个插件做出项目。
我们知道一般的项目都是先经由后端处理，然后将数据返回给前端，再进行展示。但是在openseadragon的官网中例子中只有一个简单的静态操作，当时为了研究如何才能显示出和后端结合的项目，也是花费了很大的功夫。说了这么多你最关心的来了，这个系列到底要介绍什么?
一、openseadragon基础应用（静态操作）
二、openseadragon中viewer的options文档翻译
四、openseadragon的进阶应用（结合java工程、阿里文件存储）
六、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的案例已成功运行。
这一章干货比较少，下一章节我会将viwer中的optinos选项的文档翻译放出来，之后你们就可以进行各种的测试了