OpenSeadragon 是一個用于高分辨率圖像的 JavaScript 庫,它可以讓你在網頁上提供豐富的導航和縮放功能。要在 C# 項目中使用 OpenSeadragon,你需要將其集成到前端代碼中,而不是直接在 C# 代碼中使用。
以下是一個簡單的示例,說明如何在 ASP.NET Core Razor Pages 項目中使用 OpenSeadragon:
npm install openseadragon
然后將 node_modules/openseadragon/build/openseadragon/openseadragon.min.js
復制到 wwwroot/lib/openseadragon 文件夾中。
@page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Image Viewer</title>
<link rel="stylesheet" href="~/lib/openseadragon/openseadragon.min.css" />
<script src="~/lib/openseadragon/openseadragon.min.js"></script>
<style>
#viewer {
width: 100%;
height: 600px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script>
var viewer = OpenSeadragon({
id: "viewer",
prefixUrl: "/lib/openseadragon/images/",
tileSources: {
type: 'image',
url: '/path/to/your/image.tif'
}
});
</script>
</body>
</html>
請注意,你需要將 /path/to/your/image.tif
替換為實際圖像文件的路徑。
請注意,這個示例僅展示了如何在 ASP.NET Core Razor Pages 項目中使用 OpenSeadragon。你可以根據自己的項目需求進行調整。