OpenSeadragon

最新推荐文章于 2024-09-11 13:00:10 发布

WebCsDn_TDCode

最新推荐文章于 2024-09-11 13:00:10 发布

阅读量800

点赞数

分类专栏：前端图片触摸

本文链接：https://blog.csdn.net/qq_42396791/article/details/103511673

版权

前端同时被 3 个专栏收录

70 篇文章 0 订阅

订阅专栏

图片

4 篇文章 0 订阅

订阅专栏

触摸

3 篇文章 0 订阅

订阅专栏

OpenSeadragon是一个可以显示多层图片（可放大缩小）的Web库，基于JavaScript，支持桌面和手机。

由于我项目需要，却没有找到任何中文教程，因此在官网上一边学习，一边总结于此。相关网站

方法：

打开软件 - 图片拖入框中 - 点击Export - Output Type选择imags - 起个名字name - Export options选择Export as a collection - 点击Export - 相应路径生成文件。

文件夹下找到Exported Data\deep-zoom\dzc_output_images文件夹,里面name_files文件夹就是我们要的图片存储格式，而name.xml就记录着图片的长宽等信息，这是之后编程要用的。

上代码了，为了方便，我们将name_files和之前下载的openseadragon.min.js和images文件夹放在工程目录下，并且新建一个html文件demo_html写代码

三方插件：基于2.4.1版本

<script src="https://cdn.bootcss.com/openseadragon/2.4.1/openseadragon.min.js"></script>

引申：

安装 Silverlight：是一个跨浏览器的、跨平台的插件，为Web带来下一代媒体体验和丰富的交互式应用程序体验。

做为微软出品的一个浏览器增强模块，它使得浏览器可以在HTML中渲染丰富的内容。它兼容于IE6和IE7，以及Firefox 1.5.0.8+和2.0+,可以进行删除。

为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序。Silverlight提供灵活的编程模型，并可以很方便地集成到现有的网络应用程序中。

Silverlight可以对运行在Mac或Windows上的主流浏览器提供高质量视频信息的快速、低成本的传递。

优势：兼容IE,所有浏览器

HTML

<div class="wauto">
 <div class="list" id="openSeadragon1"></div>
 <div class="list" id="openSeadragon2"></div>
</div>

JS

<script type="text/javascript">
    OpenSeadragon({
        id: "openSeadragon1",
        prefixUrl: "./images/",
        tileSources: {
            Image: {
                xmlns: "http://schemas.microsoft.com/deepzoom/2009",
                Url: "./files/1_files/",
                Overlap: "1",
                TileSize: "256",
                Format: "jpg",
                Size: {
                    Height: "1600",
                    Width: "2560"
                }
            }
        }
    });
    OpenSeadragon({
        id: "openSeadragon2",
        prefixUrl: "./images/",
        tileSources: {
            Image: {
                xmlns: "http://schemas.microsoft.com/deepzoom/2009",
                Url: "./files/34b68aa7364219cc_files/",
                Overlap: "1",
                TileSize: "256",
                Format: "jpg",
                Size: {
                    Height: "1600",
                    Width: "2560"
                }
            }
        }
    });
</script>

效果