简介
OpenSeadragon 是一个高性能、开源的图像查看器，可用于查看超大分辨率图片。它支持多种操作和视图控件，并且可以通过插件进行扩展。在前端开发中，我们经常需要使用图像查看器来显示高清图片，在这方面 OpenSeadragon 提供了一个很好的解决方案。
在本文中，我们将介绍如何使用 NPM 安装并使用 OpenSeadragon，包括其基本配置和一些常见操作的实现方法。
安装
使用 npm 命令安装 OpenSeadragon：
npm install openseadragon --save
--save 参数表示将此依赖项添加到项目的 package.json 文件中。
基本用法
下面是一个简单的例子，展示如何在 HTML 中创建一个 OpenSeadragon 实例：
-- -------------------- ---- -------
--------- -----
------
------
-------------------- ------------
----- ---------------- -----------------------------
------- ------------------------------------
-------
------
---- -------------------------
--------
----- ------ - ---------------
--- ----------------
---------- --------------------------------------------------------
------------ -
----- --------
---- ------------------------------------------------------------------------
-
---
---------
-------
-------在上面的代码中，我们首先通过 link 和 script 标签引入了 OpenSeadragon 的 CSS 文件和 JavaScript 文件。然后在 HTML 中创建了一个 div 元素，用于容纳图像查看器。最后，在 JavaScript 中使用 OpenSeadragon() 创建了一个 OpenSeadragon 实例，并将其添加到 #osd-container 容器中。
其中，prefixUrl 是资源文件路径前缀，tileSources 表示要加载的图片信息。
常见操作
调整视图位置和缩放比例
我们可以通过以下方法调整图像查看器的位置和缩放比例：
viewer.viewport.panBy(new OpenSeadragon.Point(0.1, 0.1)); viewer.viewport.zoomBy(1.2);
上面的代码将图像向右下方移动一定距离，并将缩放比例增加 20%。
获取当前视图信息
我们可以通过以下方法获取当前图像查看器的视图信息：
const zoom = viewer.viewport.getZoom();
const center = viewer.viewport.getCenter();
console.log(`zoom: ${zoom}, center: ${center.toString()}`);上面的代码将当前缩放比例和中心点坐标输出到控制台。
插件扩展
OpenSeadragon 提供了大量的插件，可以通过 NPM 安装并在项目中使用。例如，下面是如何使用 OpenSeadragon 的 DeepZoom 插件：
-- -------------------- ---- -------
------ -------------------------
----- ------ - ---------------
--- ----------------
------------ -
----- -----------------------
------- -
- ---- ---------------------------------------------------------------------------- ------ ------ ------- ----- -
-
--
------------- -----
--------- ----
---在上面的代码中，我们首先通过 import 引入了 openseadragon-deepzoom 插件。然后在创建 OpenSeadragon 实例时，将 deepZoom 参数设置为 true，即启用了 DeepZoom 插件。
结语
本文介绍了如何使用 NPM 安装并使用 OpenSeadragon 图像查看器，包括其基本配置和一些常见操作的实现方法。同时，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35083
