简介
今天我们要介绍一个前端开发中常用的 npm 包：@dbmdz/mirador-imagecropper。这个包可以帮助开发者在 Mirador 聚合展示器中对图片进行裁剪。
Mirador 聚合展示器是一个针对数字文物展示和分析的开源项目。它支持各种类型的数字化材料，包括书籍、照片、视频等。Mirador 旨在支持并加强对这些文物的研究，利用一些先进的功能来支持对这些数字化材料的研究，如图像研究和协作。
@dbmdz/mirador-imagecropper 就是 Mirador 聚合展示器的一个插件，它可以帮助开发者在 Mirador 内进行图片裁剪，并将裁剪后的图片保存在本地或者上传到服务器。
安装
首先，我们需要将 @dbmdz/mirador-imagecropper 安装到项目中。打开命令行，进入到项目目录中，执行以下命令：
npm install --save @dbmdz/mirador-imagecropper
安装完成后，我们需要告诉 Mirador 聚合展示器要使用这个插件。在 Mirador 的配置文件中添加以下代码：
-- -------------------- ---- -------
-
----- ----------
------------ ----------
-------- -
---------- -
-----------------------------
-
-
-使用
现在，我们已经将 @dbmdz/mirador-imagecropper 安装到项目中，并告诉了 Mirador 聚合展示器要使用这个插件。接下来，我们就可以在 Mirador 中使用这个插件了。
显示图片
首先，我们需要在 Mirador 中显示一张图片。在 Mirador 的配置文件中添加以下代码：
{
"manifestUri": "https://example.org/iiif/manifest"
}这个代码将会加载一个 IIIF Manifest，其中包含了我们要显示的图片。
裁剪图片
接下来，我们就可以在 Mirador 中裁剪图片了。首先，我们需要在 Mirador 中选中要裁剪的图片。然后，点击工具栏中的“裁剪”按钮，即可调出裁剪工具。
裁剪工具包含两个调节按钮：一个调整裁剪框的大小和位置，另一个调整裁剪框的长宽比例。我们可以通过这两个调节按钮来完成对图片的裁剪。
完成裁剪后，我们需要点击“保存”按钮，将裁剪后的图片保存到本地或者上传到服务器。以下是保存图片的示例代码：
-- -------------------- ---- ------- ----- ------ - ------------------------------------------- ------------------ -- - ----- -------- - --- ----------- ------------------------ ----- --------------------- ----- ------- - --- ----------------- -------------------- ----------------------- ----------------------- ---
在这个代码中，我们首先将裁剪后的图片转换为 Blob 对象，然后将它添加到 FormData 中。最后，我们通过 XMLHttpRequest 将 FormData 发送给服务器，并保存裁剪后的图片。
总结
通过本文的介绍，我们了解了如何使用 @dbmdz/mirador-imagecropper 插件来在 Mirador 中裁剪图片。同时，我们还学习了如何完成对裁剪后的图片的保存。希望本文对您在前端开发中使用 Mirador 聚合展示器时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efe4c49986ca68d8b2b