用于 JavaScript 图像注释的 Annotorious 库

什么是Annotorious？

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

下面列出了 Annotorious 库支持的一些功能：

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

GitHub 统计

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

开始使用 Annotorious

可通过三种方式获取 Annotorious 并开始在您的 Web 项目中使用它。

1.使用npm安装

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

npm install @recogito/annotorious

2.通过CDN使用托管库

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

• JS： https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js
• CSS： https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css

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 的图像注释演示，以便更好地理解 Annotorious JavaScript 库。

结论

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

类似产品