CropperJS v2 简介与 演示
如果你曾经处理过图像裁剪的需求，CropperJS 应该不会陌生。它是一款极为流行的 JavaScript 图像裁剪库，能够帮助开发者在网页上实现高效且灵活的图像裁剪功能。随着前端技术的不断发展，CropperJS 也在进化，最近发布的 v2 版本带来了不少新特性和变化。
与 v1 版本相比，v2 版本的 CropperJS 不仅在性能和功能上进行了优化，还引入了一些全新的使用方式。v2 更加模块化，将各个功能组件进行独立管理，让你可以根据实际需求灵活组合使用这些组件。
新增组件一览
v2 版本引入了一系列新组件，分别负责不同的裁剪功能模块：
-
CropperCanvas：是整个cropper的基石，作为图像的画布。
-
CropperImage：管理裁剪目标的图像，包括加载和显示图像，以及处理图像的缩放、旋转等操作。
-
CropperShade：在裁剪区域外显示遮罩效果，用来突出显示正在裁剪的部分。
-
CropperHandle：控制裁剪框的四个角和边缘，用于调整裁剪区域的大小。
-
CropperSelection：表示选中的裁剪区域，包含裁剪框的四个边、角和中央位置。
-
CropperGrid：在裁剪区域内显示网格，用于辅助用户对齐裁剪区域。
-
CropperCrosshair：在裁剪区域中央显示十字线，用于精确定位裁剪位置。
-
CropperViewer：用于在裁剪区域外实时预览裁剪结果，提供即时反馈。
这些组件的模块化设计使得 CropperJS v2 更加灵活易用，用户可以根据具体需求自由组合各个组件，达到最佳的裁剪效果。
有关 CropperJS v2 的更多详细信息和完整文档，请参阅 官方文档。
入门
安装
npm
在使用 Cropper.js 构建大型应用程序时，推荐使用 npm 安装方法。
npm install cropperjs@next
对于特定的包：
npm install @cropper/element-canvas
使用案例
下列案例由于代码量较多，所以不在这里提供代码，大家可以前往代码仓库自行查看(cropper-v2案例 · Duck/EmpiricalCase - 码云 - 开源中国 (gitee.com))
1. 基础使用
在基础使用案例中，CropperJS 提供了api，我们可以使用各种功能性按钮，让用户可以最大程度地调整图像。你可以自由缩放、旋转、移动裁剪框，并根据需要调整裁剪区域的大小和位置。这种灵活的操作方式非常适合需要精确裁剪的场景。
代码链接
2. 固定纵横比
在大多数情况下，我们希望裁剪的图像保持一个固定的纵横比，比如 16:9 或 4:3。在这个案例中，CropperJS 会在加载页面时默认开启固定比例裁剪模式，用户只需调整裁剪区域的位置即可。这个功能特别适合需要标准化图像尺寸的应用场景，如网页横幅或视频封面。
代码链接
3. 圆形裁剪
描述：有时候我们需要裁剪圆形图像，比如用于头像。在这个案例中，我们不仅可以裁剪出一个矩形的图像，还可以导出一个圆形的图像。通过设置 CropperJS 的裁剪区域为圆形，用户可以轻松地生成适合头像使用的圆形图像，同时也保留了原始矩形图像的导出选项。
代码链接
下一篇文章，我将介绍如何进行自定义图形裁剪，不拘束矩形裁剪，可以用类似 ps的钢笔功能，自行裁剪出自己要的图形，如下图
