openseadragon实战系列前后端结合篇（有你想要的干货）

序言

根据系列前的三篇，你已经可以正确地显示图像，后端也可以正确地组织目录结构得到图像，那么接下来就是前端与后端的结合。

openseadragon已经自带了ajax请求，你只需要正确的使用即可。

前端请求

再来回顾基础篇的代码

<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
<script src="/openseadragon/openseadragon.min.js"></script>
<script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon1",//绑定ID
        prefixUrl: "/openseadragon/images/",//openseadragon自带的一些图标
        tileSources: {
            Image: {
                xmlns:  "http://schemas.microsoft.com/deepzoom/2009",
                Url: root + "/public/images/first/",//图片存放的路径
                Overlap: "0",
                TileSize: "1024",
                Format : "jpg",
                Size:{
                    Height: "38912",
                    Width:  "24704"
                }
            }
        }
    });
</script>

我们可以看到tileSources里放置的是前端写死的路径和数据，现在我们需要将tileSources更换成请求ajax的方式。

var viewer2 = OpenSeadragon({
            id: "openseadragon1",
            prefixUrl: root + "/public/images/icon/",
            tileSources:{
                tileSource:root + "/api/get/ali/image",//后台接口地址
                loadTilesWithAjax:true,//使用ajax请求
                success:function(res){
                    console.log(res)//成功回调
                },
                error:functi