Cropper.js 是一个用于裁剪图像的 JavaScript 库，可轻松使用并集成到您的前端项目中。本文将为您提供 Cropper.js 的详细使用教程和示例代码。
安装
您可以通过 npm 在您的项目中安装 Cropper.js：
npm install cropperjs --save
或者也可以在 HTML 中使用 <script> 标签直接引入：
<script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.js"></script>
使用方法
首先，您需要在 HTML 中创建一个包含原始图像的容器，并在其中添加 id 属性来唯一标识该元素。例如：
<div id="image-container"> <img src="path/to/image.jpg"> </div>
然后，在您的 JavaScript 文件中，实例化 Cropper.js 并指定图像容器的 ID：
-- -------------------- ---- -------
----- ----- - ------------------------------
----- ------- - --- -------------- -
------------ -- - --
----------- -
----------------------------
----------------------------
--------------------------------
---------------------------------
---------------------------------
---------------------------------
---------------------------------
--
---这样就完成了 Cropper.js 的初始化。aspectRatio 参数指定裁剪框的宽高比，在这里我们将其设置为 16:9。crop() 方法会在用户完成裁剪操作后触发，您可以在其中获取裁剪框的位置和大小以及图像的旋转和缩放信息。
API
Cropper.js 还提供了许多其他有用的方法和选项。下面是一些常用的 API：
方法
cropper.getCroppedCanvas([options])
返回一个包含裁剪后图像的 <canvas> 元素。可选参数 options 可以用于指定输出图像的大小和格式等信息。
const canvas = cropper.getCroppedCanvas({
width: 800,
height: 450,
fillColor: '#fff',
});cropper.rotate(degree)
将图像顺时针旋转指定角度（单位为度数）。
cropper.rotate(90);
cropper.zoom(ratio)
将图像按比例缩放。
cropper.zoom(0.1);
选项
aspectRatio
裁剪框的宽高比。
{
aspectRatio: 16 / 9,
}autoCropArea
自动计算裁剪框的大小。
{
autoCropArea: 0.8, // 裁剪框占图像面积的比例
}dragMode
裁剪框的拖拽模式，默认为 'crop'。
{
dragMode: 'move', // 移动图像而非裁剪框
}示例代码
下面是一个完整的示例，演示了如何使用 Cropper.js 进行图像裁剪：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ----------
----- ---------------- -------------------------------------------------------------------
-------
------
---- ---------------------
---- ------------------------
------
------- ----------------------------
------- ----------------------------
------- --------------------------------------------------------------------------
--------
----- ----- - ------------------------------
----- ------- - --- -------------- -
------------ -- - --
---
----- ---------- - ---------------------------------------
----- ------------ - -----------------------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------