用于 JavaScript 图像注释的 Annotorious 库

使用 JavaScript 中的 Annotorious 库为网页中的图像添加绘图、注释和标签。

Annotorious 是什么？

Annotorious 是一个用 JavaScript 编写的开源图像注释库，允许通过在图像的所需位置绘制形状来在浏览器中为图像添加注释。每当绘制一个形状进行注释时，它还会打开一个弹出窗口来添加评论，甚至通过添加标签来标记注释。该库还支持对现有注释添加回复，并在需要时删除它们。

Annotorious 库支持的一些功能如下：

绘制形状：Annotorious 允许用户在图像上绘制矩形、圆形、椭圆形和徒手注释等形状。
评论和说明：用户可以使用 Annotorious 向图像的特定部分添加自定义评论和说明。
标记或标签：Annotorious 支持添加标签或标签来注释图像内的不同区域或对象。
集成：Annotorious 可以轻松集成到网页和网站中，实现无缝注释功能。
定制：该库提供了定制注释外观和行为的选项，以满足您的需要。
兼容性：Annotorious 可与各种网络浏览器和平台配合良好，从而能够适用于不同的环境。

GitHub 统计

姓名：
语言：
星星：
叉子：
执照：
存储库上次更新于

开始使用 Annotorious

有三种方法可以获取 Annotorious 并开始在您的 Web 项目中使用它。

1.使用 NPM 安装

安装Node.js后，运行以下命令：

使用 NPM 安装 Annotorious


npm install @recogito/annotorious

2. 通过 CDN 使用托管库

Annotorious 也托管在免费 CDN 服务器上，您可以使用如下 URL：

3. 使用预构建版本

从 GitHub 下载预先构建的最新版本 Annotorious。解压压缩版本后，您将看到以下文件（其中 annotorious.min.css 和 annotorious.min.js 将用于网站中的图像注释）：

annotorious.min.css
annotorious.min.js
annotorious.umd.js.map
recogito-polyfills.js

为图像添加注释

如果我们下载预构建版本，我们会得到 annotorious.min.css 和 annotorious.min.js 文件，它们可以在 head 标签中与网站链接以集成 Annotorious JavaScript 库。集成图像注释库后，我们可以添加需要添加注释的图像，最后我们可以编写 JavaScript 代码来初始化 Annotorious 库，以便为图像添加注释。

上述代码只是在浏览器中显示了一张可供注释的图像。在浏览器中加载图像和库后，我们可以双击、按住并拖动图像的所需位置来绘制形状，以突出显示所需区域。绘制形状后，会打开一个弹出窗口，您可以在其中添加注释，甚至可以添加标签/标记相关注释。例如，查看以下屏幕截图：

为图片添加注释

向图像添加 JSON 存储注释

在上一个示例中，我们展示了如何将 Annotorious 库与网页集成，并在图像上手动绘制注释。但是，也可以将预定义的注释（包括其位置）存储在 JSON 文件中，使用 loadAnnotations 方法从 JSON 文件加载注释数据，然后自动将这些注释添加到图像中。

注意： Annotorious 符合 W3C Web 注释数据模型和 W3C 媒体片段规范，可在媒体资源的特定部分或片段上添加注释。因此，应使用兼容的 JSON 文件结构。

以下是用于自动向图像添加注释的示例 annotations.json 文件：

上述代码从annotations.json文件加载注释数据并自动将其添加到图像中。例如，查看下面的截图：

向图像添加 JSON 存储的注释

在线演示

您还可以通过查看图像注释演示和基于 JSON 的图像注释演示在线尝试上述两个示例，以更好地理解 Annotorious JavaScript 库。

结论

Annotorious 是一个开源的、很棒的 JavaScript 注释库：但是，它仅支持在图像上添加注释。此外，可用于注释的形状数量也有限。