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

1.官方网站:OpenSeadragon

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

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

javascript 复制代码
  <link rel="stylesheet" href="node_modules/openseadragon/build/openseadragon/openseadragon.css" />
  <script src="node_modules/openseadragon/build/openseadragon/openseadragon.min.js"></script>

4.组件使用(一张图片显示效果)

javascript 复制代码
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.显示多图片切换

javascript 复制代码
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项目的静态资源文件夹里

相关推荐
小桥风满袖12 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang12 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户730870117930812 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学12 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼12 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu12 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin12 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者12 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
CryptoRzz12 小时前
印度尼西亚股票数据API对接实现
javascript·后端
brzhang13 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构