OpenSeadragon是一個可以顯示多層圖片（可放大縮小）的Web庫，基於JavaScript，支持桌面和手機。
由於我項目需要，卻沒有找到任何中文教程，因此在官網上一邊學習，一邊總結於此。
官網是http://openseadragon.github.io/ ，在官網首頁可以看到Demo，一個可以將圖片放大縮小拖動的視圖框。
以下是第一個例子：
1.庫文件下載
首先進入官網，點擊右上角的下載圖標下載ZIP或者TAR格式的庫文件壓縮包，解壓到工程文件夾中。
在工程中我們只需要用到openseadragon.min.js庫和存有各種按鈕圖片的imags文件夾即可。
2.圖片准備
OpenSeadragon支持很多圖片協議和格式，通常這些圖片都是由很多圖片的切片組成的，例如一張很大的圖，需要剪裁成很多小圖，按照一定的命名和存儲規則存放。
官方也提供了很多制作這些圖片庫格式的軟件http://openseadragon.github.io/examples/creating-zooming-images/ ，列舉在這里，我們選擇Deep Zoom Composer即可，去微軟官網http://www.microsoft.com/en-us/download/details.aspx?id=24819下載安裝即可。
安裝完成后打開軟件，新建一個工程，找一張大圖片拖入軟件框中，如圖所示：
點擊Export，Output Type選擇imags，隨便起個名字例如aaa，Export options選擇Export as a collection，點擊Export即可在相應路徑生成文件。
在相應文件夾下找到dzc_output_images文件夾,里面的aaa_files文件夾就是我們要的圖片存儲格式，
而aaa.xml就記錄着圖片的長寬等信息，這是之后編程要用的。
3.代碼
做好以上工作之后就可以上代碼了，為了方便，我們將aaa_files和之前下載的openseadragon.min.js和images文件夾放在工程目錄下，並且新建一個html文件Demo0_html寫代碼。
編輯並且運行以下代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>OpenSeadragon_Demo0</title> 6 <script src="openseadragon.min.js"></script> 7 </head> 8 <body> 9 <div id="openSeadragon1" style="width:800px; height:600px;"></div> 10 </body> 11 <script type="text/javascript"> 12 OpenSeadragon({ 13 id: "openSeadragon1", 14 prefixUrl: "./images/", 15 tileSources: { 16 Image: { 17 xmlns: "http://schemas.microsoft.com/deepzoom/2009", 18 Url: "./aaa_files/", 19 Overlap: "1", 20 TileSize: "256", 21 Format : "jpg", 22 Size:{ 23 Height: "1600", 24 Width: "2560" 25 } 26 } 27 } 28 }); 29 </script> 30 </html>
得到效果如圖：
可以自由拖動圖片，放大縮小。
從上面的例子我們不難分析出: id決定了這張圖片在有相同id的div顯示，prefixUrl是裝有各種按鈕名稱的文件夾images地址，這個文件夾是官方下載包里提供的。
tileSources說明了所要顯示源圖片的信息，其中xmlns是指令集，Url是之前制作的存放要求格式的圖片文件夾的路徑，overlap是相鄰圖片直接重疊的像素值，
TileSize是每張切片的大小，經測試，每張圖片都是正方形，TileSize是其邊長，Format是切片類型，Size則是圖片的總長寬。
這些數據在生產圖片庫的同時在aaa.xml文件里有（假如制作圖片庫的時候給文件起名aaa的話）。