模拟： https://codepen.io/iangilman/pen/gpejpJ

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

这里有两种方法创建OpenSeadragon对象
var viewer = new OpenSeadragon.Viewer(options);
var viewer = OpenSeadragon( options );

var 	var _tilepath = sliceurl+"/"+dv_image_info.docObject.acid+"_"+dv_page.page1+".xml";
var viewer = OpenSeadragon({
	                id: "dvviewer",
	                prefixUrl: "images/",
	                tileSources: _tilepath,
之后调用方法 可以用 “viewer.viewport.method“ （method为官网viewerport中的method方法）
 
如：viewer.viewport.getBounds() //获取当前边界
 
OpenSeadragon.Options
 
id:装载到的容器
element:同上（若两者同时存在，element具有最高优先级）
titleSources:图片源//详细描述请先自行参考官网，这个属性配置项比较多
prefixUrl:OpenSeadragon自带图表样式//工具所需用到图表样式路径
navImages://自定义图标，通过上诉属性映射静态资源图标
debugMode: 设置为true的时候调试模式开启，此时将会在图片上显示放大倍数、层数等信息，每一张切片的位置也会被显示。
debugGridColor: ['#000000']//debug颜色
blendTime:0  初始化白屏时间
alwaysBlend:true,//当图片缩小时，是否显示白色遮盖图片
autoHideControls:true//当鼠标不在图片上时，是否自动隐藏导航视图和缩略图
immediateRender:false//初始化渲染，是否自动选择最佳分辨率图片显示，移动端最好开启  
defaultZoomLevel:0//初始化放大倍率，按home键也返回显示该放大倍数，值为0时则显示自动适应显示框(view)的倍数,默认值为0
opacity：隐藏和显示，1显示，0全部隐藏
preload:false,Default switch for loading hidden images (true loads, false blocks)//不明白
compositeOperation:'source-over', 'source-atop', 'source-in', 'source-out', 'destination-over', 'destination-atop','destination-in', 'destination-out', 'lighter', 'copy' or 'xor' //任取其一，不明白有啥作用
placeholderFillStyle:'#FF8800'//初始化时，图片未载入现实的样式，默认是白色，此属性可选的方式有	String | CanvasGradient | CanvasPattern | function
degrees:90,//图片旋转角度
flipped:true//镜像翻转
minZoomLevel:null,//最小放大倍数
maxZoomLevel:null,//最大放大倍数
homeFillsViewer:false,//使主页按钮填满查看器//没看到效果
panHorizontal：true  // 水平移动约束，设为true则图片可以水平被拖动，false则不能水平移动，默认值true
panVertical：true  //是否允许垂直移动
constrainDuringPan：false// 规定了图像是否能被拖拽出允许最小范围，true为不允许，false为允许 配合上面的visibilityRatio参数使用，也就是是说，例如visibilityRatio为0.3
constrainDuringPan 为true的时候,图片被拖出70%之后就不能再拖出更多了，将其设置为false的时候，图片可以被完全脱出显示框，但是松开鼠标之后，图片会自动弹回到保留30%的位置。
 constrainDuringPan : true //管拖拽,true就不能拖拽了
wrapHorizontal:true,//水平复制图片，适用于圆形图片
wrapVertical:true,//垂直复制图片，使用于圆形图片
minZoomImageRatio:0.9/0-1/最小缩放倍率，窗口的百分比
maxZoomPixelRatio：1.1//最大放大倍率，窗口的百分比
smoothTileEdgesMinZoom:1.1,//放大到最大倍率后，容器的表现形式，是否为平滑过渡，还是由原图逐渐放大到容器的宽度，这个属性会影响性能，建议使用Infinity将此属性关闭，且IOS下，设置此属性无效
iOSDevice:false //设置是否运行在ios设备上，以避免一些表现形式得不同，如果确认将在ios下运行，设置为true，不确认得时候忽略此属性
autoResize:true,//设置是否自动伸缩，若容器得宽度被放到或者缩小，则图片会自动重新使用
preserveImageSizeOnResize:fasle// 设置图像是否保留原图比例大小，以确保当容器被放大或者缩小时，图片被拉伸，当上一属性为true时起作用
minScrollDeltaTime:50,//倍率切换时间，越大则倍率切换时越慢
pixelsPerWheelLine:40 //移动端滚动像素值，每次滚动移动得像素值
pixelsPerArrowPress：40 // 每按下浏览器进度条的向上或向下按钮，移动的像素值
visibilityRatio:规定了图像在显示框中最少要保留的比例，默认值0.5,范围0-1,0表示图像可以完全被移动到显示框之外，1表示，图像一点也不能被移动到显示框之外.
如果用鼠标将图片拖拽出去，图片还会自动弹回来，0.3表示图像至少要有30%在显示框之内，如果图像被拖出超过30%，松开鼠标后将会恢复到30%的图像在框内。
例如要设置图像最小保留比例为30%,关键代码为:
OpenSeadragon({
    visibilityRatio : 0.3,  //图片在框内的最小比例
imageLoaderLimit：0 //设置同时请求的图片数量，默认0允许浏览器根据浏览器策略允许并生成最大数量的图像请求。
clickTimeThreshold:300  //鼠标单击一下 多长时间内即被视为点击事件，比如长时间按住鼠标左键不放，如果超出这个时间，则不会被视为点击事件clickDistThreshold: 5 //鼠标左键落下至弹起这一段时间内，鼠标移动多少距离，将被视为一次点击事件，一般和上边的时间同时设置才会看到效果
dblClickTimeThreshold：300  //双击事件，两次单击的时间间隔为多少毫秒内，及会被视为双击事件
dblClickDistThreshold：20  //两次双击的时间内，鼠标移动多少距离内，即被视为双击事件
springStiffness:6.5,  //缩放过渡效果，，值越小，则动画越趋于柔和
animationTime：5 //放大或缩小动画过渡的时间，这个值越小，过渡快
gestureSettingsMouse:{  //鼠标事件设置
        scrollToZoom：true  //是否禁用滚轮滚动事件
        clickToZoom:true //是否禁用鼠标单击事件
        dblClickToZoom:true //是否禁用双击事件,如果将此设置为true   那么应该禁用单击事件
        pinchToZoom:true  //禁用移动端手势缩放
        flickEnabled:true // 拖动手势结束时禁用动态平移效果(轻弹)
        flickMinSpeed: 5  拖动结束动态平移效果的时间
        flickMomentum:5  拖动结束动态平移效果的距离
        zoomToRefPoint:false  //放大缩小中心点，设为false则以画布中心点缩放，true则以鼠标为中心点缩放
        pinchRotate:true   //可以使用手势进行旋转
gestureSettingsTouch：{} //触摸屏事件   同上
gestureSettingsPen：{}  //笔触事件  同上
gestureSettingsUnknown：{}  //未知设备  同上
zoomPerClick:8,  //点击一下  放大倍率 设置为1   则代禁用单击事件  同gestureSettingsMouse.clickToZoom
zoomPerScroll:1  //滚轮放大倍率，设置为1  则代表禁用滚轮事件   同gestureSettingsMouse.scrollToZoom
zoomPerSecond:1,   //结束单个缩放动画的秒数
showNavigator:true //是否显示导航缩略图
navigatorId：   //导航所在容器ID  如果指定则会忽略导航上所有的属性  使用自定义的css
navigatorPosition：'TOP_LEFT'，'TOP_RIGHT'，'BOTTOM_LEFT'，'BOTTOM_RIGHT'或'ABSOLUTE'   ///导航所在位置 若为ABSOLUTE，可根据需求指定位置navigatorTop，navigatorLeft，  且会忽略下边两个属性若为其他，则会根据下边的属性或者导航的宽高确定导航的大小
navigatorSizeRatio：0.2   导航的大小与整体视图的比例 ，  如果设置了导航的宽高  则忽略此属性
navigatorMaintainSizeRatio: ture 当容器大小改变时，是否自动缩放导航图的大小，此属性依赖上一属性
navigatorHeight：   //指定后将会忽略上边两个属性
navigatorWidth：  同上
navigatorAutoResize:true  根据视图自动调整导航大小  若已确定导航大小，请设置为false避免每次窗口缩放的查询 可提高性能
navigatorAutoFade:false  // 如果用户停止与视口交互，则淡化导航器迷你地图。设置为false将使导航器小地图始终可见。
navigatorRotate:true   //图像旋转时   导航地图同时旋转
navigatorBackground：'#ffffff'  //导航背景色
navigatorOpacity:0.8   //导航背景透明度
navigatorBorderColor：''  // 导航边框颜色
navigatorDisplayRegionColor： ''   //导航中，当前查看区域的边框颜色
controlsFadeDelay:2000   //停止交互多少秒后，隐藏导航栏
controlsFadeLength:1500   //导航窗口淡化动画时间
maxImageCacheCount：200   //最大缓存图片数量
timeout:30000   //图片最大显示时间数，加载超出这个时间后，及被认定为加载失败
    useCanvas:true  // 使用Canvas绘制图像，设置false  即使浏览器支持Canvas  也不会使用Canvas
minPixelRatio:0.5  //不确定，这个值越高，则会在带宽数较低的设备上显示时，渲染出的图片质量越低，用以减少带宽消耗
mouseNavEnabled：true  是否允许用户通过鼠标或触摸 与图像交互
showNavigationControl：true  //基础控件的展示与隐藏
showZoomControl:true   //显示放大和缩小按钮
showHomeControl：true  //显示回到主位置按钮
showFullPageControl：true   //显示全屏按钮
showRotationControl:true //显示左旋转和右旋转按钮  只有在支持的浏览器上才可以正常显示
showFlipControl：true   //显示镜像翻转按钮
navigationControlAnchor: 'NONE','TOP_LEFT','TOP_RIGHT','BOTTOM_LEFT','BOTTOM_RIGHT','ABSOLUTE'  //控件位置
showSequenceControl:true //显示向前向后按钮
sequenceMode:true  //设置为true 代表加载的是一张图片，而非一个图片合集
navPrevNextWrap：true  //设置为true，上一个按钮和下一个按钮会形成循环
initialPage：0 //上一属性为true时，设置首次加载加载第几个在主屏
preserveViewport：true  //猜测：如果是一个集合时，每张图像之间切换时，视窗将会被保留
preserveOverlays:true   //切换图片后，仍然保留图层
showReferenceStrip:false   //显示图像缩略图滚动条
    collectionMode:true, //
    collectionRows:10,
    collectionColumns:10,
    collectionLayout:,
    collectionTileSize:,
    collectionTileMargin:,
    zoomInButton：''  //自定义放大按钮ID
    zoomOutButton：'',//自定义缩小按钮ID
    homeButton:'',//自定义主位置按钮ID
    fullPageButton:'',//自定义全屏按钮ID
    rotateLeftButton:'',//自定义左旋转按钮ID
    rotateRightButton:'',//自定义右旋转按钮ID
    previousButton:'',//自定义上一个按钮ID
    nextButton:''//自定义下一个按钮ID
    crossOriginPolicy:true,  //设置为true 不允许使用跨域请求cors
    //请使用titleSource，不要使用下边的
    ajaxWithCredentials：true   是否为AJAX请求设置withCredentials XHR标志
    loadTilesWithAjax：true   //是否适用ajax请求加载切片
    ajaxHeaders：  ’‘ajax请求头
     panHorizontal (default: true)        水平允许拖拽
panVertical (default: true)           竖直允许拖拽
wrapHorizontal (default: false)       在水平方向会连续显示，例如当图像显示到右边缘以外的时候，会把图像的左边缘跟右边缘结合，接着显示，一般用于显示地图
wrapVertical (default: false)          垂直方向连续显示
visibilityRatio (default: 0.5)      图片在显示框view中被限制的最小百分百
minPixelRatio (default: 0.5)          最小像素比，这个值越高效果，停止显示更高效果的值就约低，比如带宽低的时候可以设置在1.5，具体效果我也没完全读懂
minZoomImageRatio (default: 0.9)    最小允许的缩小比例
maxZoomPixelRatio (default: 2)  像素最大允许放大比例，如果是设置为“infinite”可以无限放大，在HTML5的canvas中用的时候,如果viewing device不可用则效果会不好
defaultZoomLevel (default: 0)    默认显示的放大倍数，页面刚打开或按home键时候的放大倍数，0则自动适应view
更多具体内容
 http://openseadragon.github.io/docs/OpenSeadragon.html#.Options
 图片准备
 
OpenSeadragon支持很多图片协议和格式，通常这些图片都是由很多图片的切片组成的，例如一张很大的图，需要剪裁成很多小图，按照一定的命名和存储规则存放。
 
 
_viewer = OpenSeadragon({
 prefixUrl: “images/”,//是装有各种按钮名称的文件夹images地址，这个文件夹是官方下载包里提供的
 tileSources: _tilepath,//所要显示源图片的信息
 });
 
OpenSeadragon提供了几个限制最小和最大缩放范围以及缩放范围的选项,这些特性通常通过各种选项的组合来控制。
 http://openseadragon.github.io/examples/ui-zoom-and-pan/
 
OpenSeadragon.Viewport.
 
zoomTo(zoom, refPointopt, immediatelyopt)):缩放到指定的缩放级别.[zoom:缩放到缩放等级;refPoint(OpenSeadragon.Point}:保持在相同屏幕位置的点。默认设置为viewport center;immediately:是否马上执行 true/false;]
zoomBy(zoom):缩放到指定的缩放级别[zoom:缩放到缩放等级];
fitBounds(bounds, immediatelyopt):使viewport缩放和平移，以便指定的边界在viewport中占用尽可能多的空间。注意:该方法忽略了约束(minZoom, maxZoom和visibilityRatio)。[bounds：界线；immediatelyopt：immediately=false, constraints=false]
getBounds(current):返回viewport坐标中可见区域的边界。
getHomeBounds():返回viewport坐标中的home边界。
pointFromPixel(Point)：将原始坐标转为视图坐标
deltaPixelsFromPoints:将视图坐标转化为像素坐标
deltaPointsFromPixels：将像素坐标转化为视图坐标
viewportToImageCoordinates(Point)：将视图坐标转为图像坐标。注意这里的Point格式应为{x:0,y:0}，在官方说明中，此处应该传递的是openseadragon.Point，如果只使用坐标转化，只需要按照{x:0,y:0}传入即可。
--------------------- 
openseadragon已经集成了一些方法，比如两点间距离的计算。
 
new OpenSeadragon.Point(x,y).method
例子：
 如果要监听点击事件我们可以这样写，这个也是官方提供的案例。
 
viewer.addHandler（'canvas-click'，function（event）{
    // canvas-click事件为我们提供了Web坐标中的位置。
    var webPoint = event.position;
    //将其转换为视口坐标，OpenSeadragon坐标的通用语言。
    var viewportPoint = viewer.viewport.pointFromPixel（webPoint）;
    //从视口坐标转换为图像坐标。
    var imagePoint = viewer.viewport.viewportToImageCoordinates（viewportPoint）;
    //显示结果
    console.log（webPoint.toString（），viewportPoint.toString（），imagePoint.toString（））;
来源：
 https://blog.csdn.net/firstblog/article/details/90665415
 var viewer = new OpenSeadragon . Viewer ( ... ) ;
viewer . setFilterOptions ( {
    filters : {
        processors : OpenSeadragon . Filters . BRIGHTNESS ( 50 )
} ) ;
 降低亮度并反转图像：
 var viewer = new OpenSeadragon . Viewer ( ... ) ;
viewer . setFilterOptions ( {
    filters : {
        processors : [
            OpenSeadragon . Fi
                                    OpenSeadragon介绍以及上手:学习OpenSeadragon之一
OpenSeadragon主要用于地图、医学图像等需要放大缩小分层显示的图像显示。
1，简单例子
导航视图就是在一个小框中显示整个地图的全貌，点击小框中的相应位置，整个图片显示的焦点就能定位到点击的相应位置，就像魔兽争霸、dota里的小地图那样，如下图右上角。
OpenSeadragon已经为我们提供了方便...
                                    OpenSeadragon是一个开源的图像浏览器插件，可以用于在Web浏览器中显示高分辨率图像。
使用OpenSeadragon需要先在HTML文件中引入OpenSeadragon的库文件：
<script src="https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/openseadragon.min.js"...
                                    OpenSeadragonViewer
 OpenSeadragon查看器周围的React包装器组件。 将IIIF清单URL馈OpenSeadragonViewer ，它将使用以下内容呈现OpenSeadragon查看器：
 FontAwesome工具栏图标
磁贴来源下拉菜单
缩略图导航
支持深层链接和保存URL参数
安装及使用
yarn add openseadragon-react-viewer
// And peer dependencies
yarn add @emotion/react openseadragon react-device-detect react-select
然后在您的应用程序中使用它：
 import React from 'react';
import { OpenSeadragonViewer } from "openseadragon-rea
                                    Openseadragon 是一款基于 Javascript 的浏览器端 Deep Zoom 图像在线预览工具，它可以同时支持桌面端和移动端。我们可以轻松的使用它来构建我们自己的 Deep Zoom 图像预览工具。
实现热区编辑
 在画面中定义热区，以显示图文信息或者增加链接，是图形展示常见而且实用的功能点。
本章节通过引入OpenSeadragonSelection插件，JQuery ballon插件，利用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
                                    OpenSeadragon 是一个用于展示高分辨率图像的 JavaScript 库，支持多种方式浏览大型图像，包括缩放、平移、旋转等操作。它提供了许多实用的方法，包括：
viewport.panTo(point): 将视图平移到给定的点。
viewport.zoomTo(zoom): 缩放到给定的比例。
viewport.goHome(): 返回初始视图。
viewport.applyConst...
                                    @ medmain / react-openseadragon
 React组件包装OpenSeadragon图像查看器
有关软件包说明文件，请参见./package/README.md。
run . @install --@dev
run . @lint --@dev
如何使用：
 注意：目前，这不适用于匿名库的缩小版本。
 要在openseadragon查看器上绘制圆形注释，请在包含OpenSeadragon库之后，按照将'/css/annotorious.css'和'/annotorious-dev.js'文件包含到项目中。
 然后添加'/circular-annotation-plugin.js'文件。 
<link type="text/css" rel="stylesheet" href="css/annotorious.css" />
[removed][removed]
<script src="circular-annotation-plugin.js"
    如果你正在寻找openseadradgon的相关资料，那么我相信你一定清楚了这个插件的作用，这里就不再赘述了。openseadragon所支持的图像协议可以在官网找到：https://openseadragon.github.io/#examples-and-features，在本系列教程中，所有的图像源使用的是微软的dzi协议。你一定会问dzi协议又是什么鬼，别着急，在最...
                                    使用openseadragon实现大图展示目标：使用插件制作大图展示代码部分工具应用部分
目标：使用插件制作大图展示
需要用到js插件： openseadragon.js，需要用到切图工具：Deep Zoom Composer 
&lt;!-- 我是简单易懂的html--&gt;
 &lt;div class="content" &gt;
     &lt;div id='openSea...
根据系列前的三篇，你已经可以正确地显示图像，后端也可以正确地组织目录结构得到图像，那么接下来就是前端与后端的结合。
openseadragon已经自带了ajax请求，你只需要正确的使用即可。
再来回顾基础篇的代码
<div id="openseadragon1" style="width: 800px; height: 600px;"></div&gt...