序言
根据前边的两篇文章，我们已经可以实现图像的显示了。但是现在我们显示的还是由微软软件自动生成的图片，在实际运用中，需要由后端将图片切割，具体切割方式在微软的dzi图片格式说明中也有，地址：https://docs.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc645077(v=vs.95)。建议自己去理解微软官方说明，当然如果你很懒的话，那就继续往下看，我会详细说明命名和切割规则。
图像的切割
切割图像之前你需要定义切割出来的每一张图片的大小为多少像素，每张切割出来的图像必须为正方形，且有一个规则，即必须是2的N次方。例如你定义每张切割出来的图像大小为1024*1024，则切割出来的每张图像的像素为1024*1024即2的10次方。边缘如果不够1024像素不需要过多操作，直接切割下来就行。我们还是举个栗子：假设现在你有一张3000*3000的照片，你定义切割出来的每张照片大小为2的10次方即1024*1024。那么切割就应该如下图所示：
按照这样切割之后，你就得到一层图片源，但是我们的openseadragon需要的是多层次图片源、按需加载。这是什么意思呢？根据栗子，我们现在切割的是3000*3000像素，一定有比3000*3000更清晰的像素比如8000*8000，如果用户一进来看到的是3000*3000像素的图像，那么若用户将图像放大，此时应该加载的是8000*8000的图像。所以，在你准备切割图像时，原图像一定是有多张且像素比不同的图像，以便更加清晰的显示图像。每一张像素的图片，都应该按照同样的规则进行切割，即切割出来的每张图片都必须保证是1024*1024。具体须要加载到多清晰，这个根据你的项目需求而定。
现在我们已经切割了图像，但是具体切割下来的图像如何命名呢？
图像命名规则
我们在基础篇中可以看到，我们并没有去设置如何读取照片，从哪一个文件夹开始读取，因为这些操作已经在openseadragon中集成，你只需要按照一定的规则放置图片，openseadragon会自动去相应目录读取文件，那么如何命名图像？如何建立文件夹呢？我们还是紧接上一个栗子来说，比如你现在每切割一张图像（1024*1024），都需要保存一次，那么命名规则应该如下所示：
如图所示，每一个1024*1024块的中间红色数字，即为该切割下来的图片应该保存成的名称。刚才我们已经说过，你需要多张不同像素的图片源，那么每张不同像素的图片源都可以切割N多个小的图片（1024*1024），所以每张像素切割下来的图片应该统一放到一个目录下，目录如何建立呢？
文件夹命名规则
在基础篇中，如果你的工程成功运行了，你又恰巧看了控制台的network，你会发现openseadragon初始化时，它自己去请求了一个文件夹里的图片，那么它怎么会去那一个固定的目录下读取呢？解密时刻：我们这一章一直没有提到代码，现在我们再来回顾一下基础篇中的代码：
1 tileSources: {
2 Image: {
3 xmlns: "http://schemas.microsoft.com/deepzoom/2009",
4 Url: root + "/public/images/first/",
5 Overlap: "0",
6 TileSize: "1024",
7 Format : "jpg",
8 Size:{
9 Height: "38912",
10 Width: "24704"
11 }
12 }
13 }
在这里我们重点关注TileSize属性，这个属性是什么意思呢？我相信不少人已经猜出来了，它代表着你每张图像的切割大小。openseadragon会计算这个属性然后去请求相应的目录，即如果这个值是1024（2的10次方），那么它会去请求10这个目录，然后加载照片。所以如果你的TileSize是1024的话，那么10这个目录是必不可少的，至于这个目录里应该放像素是多少的图像源，由你的项目需求决定。比如你的图像最小的像素是3000*3000，那么10这个目录下就应该放置3000*3000切割下来的图像，然后4000*4000的图像就应该放在11目录下，以此类推。至此你就得到图像的放大目录。那么缩小的目录规则又是什么样的呢？
低像素图像切割方式
我们还是举个栗子：如果你现在图像的正常像素是3000*3000，你还有2000*2000、1000*1000、500*500的图片，那么该如何命名呢？相信各位看官已经有了自己的推测，如果你3000*3000紧挨着的小像素是2000*2000，且TileSize是1024，那么9这个目录就应该放置2000*2000的图像源，以此类推，一直到2的零次方即0这个目录。一般来说我们并没有很小像素的图片，那么正常来说剩下的小目录也不应该空缺，那么如何填补呢？比如说你最小的像素是300*500，已经到了第7个目录，你已经没有更小的像素了，那么第6个目录的图片该放什么呢?解密：以最长边为基础，根据微软定义规则，第6个目录你应该放置2的6次方的像素的照片，即64*64像素的图片，那么你需要计算500/64=300/XXX；这里的XXX，是你要计算的比例，即第6个目录，放置64*XXX像素的图片，以此类推直到1*1像素的图片放到0目录下。至此，你才算完成图像的所有切割。PS：低像素的切割方式也是我翻了很多文档自己理解的，如果有专业搞图像问题的知道正确的解决方案，也可以留言分享给我们。
夯实基础
根据上边的代码片段，我们现在可以正确的设置相应的数据源了；
xmlns：命名空间，我们使用的是微软的dzi，所以直接使用http://schemas.microsoft.com/deepzoom/2009即可；
Url：包含0-N目录的文件夹所在位置；
Overlap：切割图片时，每张图片（1024*1024）切割重合的像素。openseadragon根据这个属性自动调整图像重合的边距；
TileSize：每张切割下来的图像大小
Format：图片后缀格式
Height：最高像素的高度；//openseadragon会自动计算最大放大倍数
Width：最高像素的宽度；//openseadragon会自动计算最大放大倍数
结束
现在我们自己切割的图像也有了，那么下一步我们将要介绍的是如何通过ajax请求与后端项目结合使用。