UniversalViewer 是一款用于实现高交互式图片、地图、书籍等的可嵌入式 Web 阅读器的开源 JavaScript 库。它支持多语言、自由拓展，可以轻松帮助开发者完成复杂的图像处理和预览功能。在本篇文章中，我们将介绍如何使用 UniversalViewer 库。
安装
通过 npm 安装 UniversalViewer：
npm install universalviewer --save
基础使用
以下是一个最基本的 UniversalViewer demo，你只需简单地编写一个 HTML 文件，引用 UniversalViewer 库，然后在 JavaScript 文件中一行代码即可实现阅读器的加载。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
----- ---------------- --------------- ---------------------------
-------
------
---- --------------
------- ---------------------- ----------------------------------
------- -----------------------
--- -- - --- -----------------------------------------
----------
---------
-------
-------运行以上代码会呈现一个空白的页面，点击之后会跳转到空白页面，这是因为没有设置阅读器要加载的内容。我们接下来将逐步介绍如何使用 UniversalViewer 库加载不同类型的内容。
图像内容
导入图像需要基于 IIIF （国际互联网图像协议），我们可以将本地加载的图像上传到一个 IIIF 兼容的服务器上，然后通过 UniversalViewer 的 API 远程加载。IIIF 服务器可以是自己搭建的 Apache 或者 Nginx，ImageMagick、OpenSeadragon 和 IIIF-Image-Server 等多个软件都可以搭建一个 IIIF 服务器。
以下示例代码演示如何加载一个来自 harpersbazaarart.artron.net 的图像：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
----- ---------------- --------------- ---------------------------
-------
------
---- --------------
------- ---------------------- ----------------------------------
------- -----------------------
--- ----------- - ------------------------------------------------------------
--- -- - --------------
-----------------------------
---------
-------
-------效果如下：
地图内容
加载地图内容同样需要 IIIF 协议，以下示例代码演示如何加载地图。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
----- ---------------- --------------- ---------------------------
-------
------
---- --------------
------- ---------------------- ----------------------------------
------- -----------------------
--- ----------- - --------------------------------------------------------------
--- -- - --------------
-----------------------------
---------
-------
-------效果如下：
书籍内容
UniversalViewer 还支持加载由 IIIF Presentation API 所描述的书籍类型的内容。以下示例演示如何加载一个书籍内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
----- ---------------- --------------- ---------------------------
-------
------
---- --------------
------- ---------------------- ----------------------------------
------- -----------------------
--- ----------- - ------------------------------------------
--- -- - --------------
-----------------------------
---------
-------
-------效果如下：
拓展功能
UniversalViewer 不仅支持多种类型的内容，还可以实现各种自定义拓展功能，如自定义主题、控件、插件等。
自定义主题
UniversalViewer 提供了 API 用于自定义主题。以下示例演示如何修改主题颜色：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
----- ---------------- --------------- ---------------------------
-------
-- ----- --
-------- -
----------------- -----
-
---------- -
----------------- -----
-
------------ -
----------------- -----
-
-------- -
------ -----
-
--------
-------
------
---- --------------
------- ---------------------- ----------------------------------
------- -----------------------
--- ----------- - ------------------------------------------
--- -- - --------------
-----------------------------
---------
-------
-------效果如下：
自定义控件
UniversalViewer 可以方便地添加、移除、定制控件，以下示例演示如何添加一个控件到工具栏：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
----- ---------------- --------------- ---------------------------
-------
------
---- --------------
------- ---------------------- ----------------------------------
------- -----------------------
--- ----------- - ------------------------------------------
--- -- - --------------
-----------------------------
-- ---------
--- ------ - --- -----------
------ ------ -------
-------- ----------
------ ---------- -
------------ ---------
-
---
-----------------------------
---------
-------
-------效果如下：
自定义插件
在 UniversalViewer 中，插件可以实现自定义类型的内容、控件、行为等功能。以下示例演示如何加载并使用一个插件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------- ------------
----- ---------------- --------------- ---------------------------
-------
------
---- --------------
------- ---------------------- ----------------------------------
------- ---------------------- -------------------------
------- -----------------------
--- ----------- - ------------------------------------------
--- -- - --------------
-----------------------------
-- ----
------------------- -----------------
---------
-------
-------结语
UniversalViewer 是一个强大且自由度极高的阅读器组件，可以方便地实现多种类型的内容，也可以自定义各种拓展功能。希望这篇文章可以帮助大家使用 UniversalViewer 快速构建自己的阅读器项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/88754