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

最新推荐文章于 2025-03-20 11:53:30 发布

原创最新推荐文章于 2025-03-20 11:53:30 发布 · 3.4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#openseadragon #深度图形缩放

openseadragon 专栏收录该内容

6 篇文章

订阅专栏

本文档介绍了如何将前端与后端结合使用OpenSeadragon进行深度图形缩放展示。通过前端发送AJAX请求，后端返回JSON数据，实现图像的正确显示。详细阐述了后端数据返回格式要求，提供了Spring Boot接口处理示例，并探讨了更灵活的前端加载图像方法，包括使用自定义AJAX请求和监听图像加载状态。

序言

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

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:function(err){
                    console.log(err)//失败回调
                }
            }
        });

把tileSources里的内容换成如上代码即可正确显示数据。就是这么简单。当然按照这样写后端的数据返回格式也有要求。

后端数据返回格式

后端返回json格式数据如下图所示

是不是很熟悉，这种格式即为静态数据时tileSources里的配置。在开篇时说过，要结合阿里存储，上图被我注释掉的是我们公司阿里文件存储的地址，因为设计到客户资料，所以不便显示。当然如果你只是一个前端的话，没有后端跟你配合研究这个，你可能会很麻烦。贴心如我，后端的代码也为你准备好了。

我使用的是spring boot 框架

首先定义最外层返回数据 ResData.java

public class ResData {
    private String xmlns;
    private String Url;
    private String Overlap;
    private String TileSize;
    private String Format;
    private Object Size;

    public ResData() {
    }

    public Object getSize() {
        return Size;
    }

    public void setSize(SizeData size) {
        Size = size;
    }

    @Override
    public String toString() {
        return "ResData{" +
                "xmlns='" + xmlns + '\'' +
                ", Url='" + Url + '\'' +
                ", Overlap='" + Overlap + '\'' +
                ", TileSize='" + TileSize + '\'' +
                ", Format='" + Format + '\'' +
                ", Size=" + Size +
                '}';
    }

    public String getXmlns() {
        return xmlns;
    }

    public void setXmlns(String xmlns) {
        this.xmlns = xmlns;
    }

    public String getUrl() {
        return Url;
    }

    public void setUrl(String url) {
        Url = url;
    }

    public String getOverlap() {
        return Overlap;
    }

    public void setOverlap(String overlap) {
        Overlap = overlap;
    }

    public String getTileSize() {
        return TileSize;
    }

    public void setTileSize(String tileSize) {
        TileSize = tileSize;
    }

    public String getFormat() {
        return Format;
    }

    public void setFormat(String format) {
        Format = format;
    }
}

之后定义 Size.java

public class SizeData {
    private String Height;
    private String Width;

    public SizeData() {
    }

    @Override
    public String toString() {
        return "SizeData{" +
                "Height='" + Height + '\'' +
                ", Width='" + Width + '\'' +
                '}';
    }

    public String getHeight() {
        return Height;
    }

    public void setHeight(String height) {
        Height = height;
    }

    public String getWidth() {
        return Width;
    }

    public void setWidth(String width) {
        Width = width;
    }
}

然后在接口java中，引入上两个java，并处理接口返回逻辑

    @GetMapping("/image")
    public Object setInfo() {
        ResData resdata = new ResData();
        resdata.setFormat("格式");
        resdata.setOverlap("重叠像素");
        resdata.setTileSize("切割大小");
        resdata.setUrl("图片地址");
        resdata.setXmlns("命名空间");
        SizeData size = new SizeData();
        size.setWidth("宽度");
        size.setHeight("高度");
        resdata.setSize(size);
        JSONObject a = new JSONObject();
        a.put("Image",resdata);
        return a;
    }

至此，运行项目即可正确显示图像。

进阶

虽然按照上述方法可以正确显示图像，但是对于接口返回的数据有着严格的要求，我们自己的项目返回格式肯定是经过了一些处理的，所以在实际的应用中前端可以采用如下方式加载图像。

首先，绑定元素

var viewer = OpenSeadragon({
                id: "openseadragon1",
                prefixUrl: root + "/public/img/seadragon/icon/",
            });

然后定义tileSource

var tileSource = new OpenSeadragon.TileSource;

然后使用自己的ajax请求，向后端请求数据

admin.req({
    url:root + "后端地址",
    method:"GET",
    contentType:"application/json",
    success:function(res){
        var data = res.body.data.Image;//数据处理
        tileSource = {//装载tileSource 
            Image: {
                xmlns: data.xmlns,
                Url: data.Url,
                Overlap: data.Overlap,
                TileSize: data.TileSize,
                Format: data.Format,
                Size: {
                    Height: data.Size.Height,
                    Width: data.Size.Width
                }
            }
        };
        viewer.open(tileSource)//将tileSource在viewer中打开
    },
    fail:function(err){
    }
})

这样做有什么好处？这样做之后你可以使用openseadragon中tileSource各种方法，例如success回调，举个栗子

admin.req({
    url:root + "后端地址",
    method:"GET",
    contentType:"application/json",
    success:function(res){
        var data = res.body.data.Image;//数据处理
        tileSource = {//装载tileSource 
            Image: {
                xmlns: data.xmlns,
                Url: data.Url,
                Overlap: data.Overlap,
                TileSize: data.TileSize,
                Format: data.Format,
                Size: {
                    Height: data.Size.Height,
                    Width: data.Size.Width
                }
            },
            success:function(){
                console.log("tileSource 成功装载")
            }
        };
        viewer.open(tileSource)//将tileSource在viewer中打开
    },
    fail:function(err){
    }
})

因为ajax请求是异步操作，前端有时需要知道图像是否已在界面中成功打开，所以我们还可以进一步做监听

viewer.addHandler("open",function() {
    console.log("图像打开成功");
});

至此，你可以监听到openseadragon各个阶段的变化。还不赶快去找老板讨赏>_<

结束

做到这里，一个成熟的基础项目框架已搭建完成。还有一个致命的问题，如果你使用的是阿里文件存储，且客户资料是保密的，还需要后端进行ajax请求拦截校验，并且阿里云那边也需要设置相应的拦截机制。

下一章会介绍openseadragon其他属性的应用，属于进阶教程。