当前位置：首页 > article >正文

VUE3+TS使用OpenSeadragon学习之旅，实现多图片切换效果

article 2025/1/21 12:12:21

1.官方网站：OpenSeadragon

2.使用npm下载插件：npm install openseadragon

3.在 index.html文件引入资源

  <link rel="stylesheet" href="node_modules/openseadragon/build/openseadragon/openseadragon.css" />
  <script src="node_modules/openseadragon/build/openseadragon/openseadragon.min.js"></script>

4.组件使用（一张图片显示效果）

1.引入OpenSeadragon 
import OpenSeadragon from "openseadragon"

2.存放图片的标签
 <div id="openseadragon1" class="w-full h-full"></div>

3.初始化实例
const viewer= OpenSeadragon({
        id: "openseadragon1",//标签id
        showNavigator: true, // 是否显示导航缩略图
        prefixUrl: "/public/openseadragon/images/", //插件小图标
        tileSource = {
          type: "image",//图片的类型
          url: '',//图片的url
        }
      })

5.显示多图片切换

1.引入OpenSeadragon 
import OpenSeadragon from "openseadragon"

2.存放图片的标签
 <div id="openseadragon1" class="w-full h-full"></div>

3.初始化实例
const viewer: any = ref("")
const initOpenSeadragon = () => {
      viewer.value = OpenSeadragon({
        id: "openseadragon1",
        showNavigator: true, // 是否显示导航缩略图
        prefixUrl: "/public/openseadragon/images/", //插件小图标
      })
}

4.定义函数：加载不同图片
const loadImage = (imageUrl: any) => {
      viewer.value.close() // 清除之前加载的图像
      if (imageUrl) { //判断传进来的url是否有值
        const tileSource = {
          type: "image",
          url: imageUrl,
        }
        viewer.value.open(tileSource) // 设置新的tileSources并加载新图像
      } else {
        message.warning("未上传图片")
      }
}
5.在页面加载之后onMounted里获取请求，获取到相关数据后调用初始化方法initOpenSeadragon 
 let listUrl: any = ref({})
 onMounted(() => {
       const { code, data } = await API.getGrowthImageInfo()//发起请求
      if (code === 200) {
        const list = JSON.parse(data.successfulImageUrl)
        ......//处理数据等相关的
        initOpenSeadragon()//调用初始化方法initOpenSeadragon 
      }
 })

6.在点击切换按钮时调用loadImage方法
    loadImage(url)//url是指传图片url

注意 prefixUrl: "/public/openseadragon/images/", 插件小图标来自于官网下载包里面的images文件夹下，可自行放在vue项目的静态资源文件夹里