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项目的静态资源文件夹里
