序言
这一章节主要是viewer中options的翻译，如果你查看官方文档你会找到下图所示
在这里你会看到基础篇用到的三个属性：id，prefixUrl，titleSources。为了更好的运用这些属性，我自己做了一个文档翻译，以便大家查阅。
文档翻译
id:装载到的容器
element:同上（若两者同时存在，element具有最高优先级）
titleSources:图片源//详细描述请先自行参考官网，这个属性配置项比较多
prefixUrl:OpenSeadragon自带图表样式//工具所需用到图表样式路径
navImages://自定义图标，通过上诉属性映射静态资源图标
debugMode: true或false 开启debug模式
debugGridColor: ['#000000']//debug颜色
blendTime:0 初始化白屏时间
alwaysBlend:true,//当图片缩小时，是否显示白色遮盖图片
autoHideControls:true//当鼠标不在图片上时，是否自动隐藏导航视图和缩略图
immediateRender:false//初始化渲染，是否自动选择最佳分辨率图片显示，移动端最好开启
defaultZoomLevel:0//初始化放大倍率，默认为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 //是否允许水平移动
panVertical：true //是否允许垂直移动
constrainDuringPan：false//官方未说明
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代表图片一点也不可以拖出
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请求头
结束
我已经根据官方的文档实际操作过这些属性，有些属性没有被测到，有些属性是用了也没有任何变化，我在注释中都说明了，这些属性已经可以满足大部分的需求了，如果你测出了一些属性，也可以分享给大家。这些属性请尽可能多的自己实际应用一下，以便理解。现在我们已经可以操作静态的图像了，接下来会介绍dzi图片的生成规则与命名方式
