前言
现在随着移动互联网和 Web 技术的发展，越来越多的网站需要使用到图片裁剪功能，比如用户头像上传、图片剪裁等等。而 cropperjs2 作为一款轻量级、易用且功能强大的图片剪裁库，受到越来越多前端开发者的欢迎。本篇文章将为大家详细介绍 cropperjs2 的使用方法，希望对大家有所帮助。
安装和引入
首先，我们需要通过 npm 命令来安装 cropperjs2 这个包：
npm install cropperjs2
然后，在我们的 HTML 文件中，需要引入 cropperjs2 相关的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="path/to/cropperjs.css"> <script src="path/to/cropperjs.min.js"></script>
基本使用
在引入完 cropperjs2 相关文件后，就可以开始使用了。以下是一个基本的使用示例：
-- -------------------- ---- -------
-----
---- --------------- -------------
------
-----
------- ---------------------------
------
--------
--- ----- - -----------------------------------
--- ------- - --- -------------- -
------------ -- - --
----- --------------- -
----------------------------
----------------------------
--------------------------------
---------------------------------
---------------------------------
---------------------------------
---------------------------------
-
---
--- ------ - --------------------------------------
-------------- - ---------- -
--- ------ - ---------------------------
-- ------ ------ --------
-
---------上述代码中，首先我们定义了一个包含图片和裁剪按钮的 HTML 代码块，接着我们通过 JavaScript 代码来初始化 cropperjs2 实例，并设置裁剪的宽高比和裁剪事件的回调函数。最后，我们绑定一个点击事件来处理裁剪后的 canvas 或者上传到服务器。
指南
cropperjs2 除了基本的使用方法外，还有很多高级的功能需要掌握，以下是一些指南：
属性和方法
以下是 cropperjs2 常用的属性和方法：
属性
x：裁剪框左上角的 x 坐标。y：裁剪框左上角的 y 坐标。width：裁剪框的宽度。height：裁剪框的高度。rotate：当前的旋转角度。scaleX：当前的水平缩放比例。scaleY：当前的垂直缩放比例。aspectRatio：裁剪框的宽高比例，例如 16/9。cropBoxData：裁剪框的数据，包括生成的宽高、左上角坐标等信息。canvasData：canvas 的数据，包括生成的宽高、左上角坐标等信息。
方法
getCroppedCanvas(options)：生成裁剪后的 canvas，options 包括width、height、fillColor等属性。getImageData()：获取图片的数据，包括宽高等信息。getCanvasData()：获取 canvas 的数据，包括宽高、左上角坐标等信息。setCanvasData(data)：设置 canvas 的数据。setCropBoxData(data)：设置裁剪框的数据。rotate(degrees)：旋转图片。scaleX(scale)：水平缩放图片。scaleY(scale)：垂直缩放图片。move(offsetX, offsetY)：移动图片。
事件
cropperjs2 还提供了多个事件，可以帮助我们更方便地处理裁剪、旋转等操作：
ready：初始化完成事件。cropstart：开始裁剪事件。cropmove：裁剪框移动事件。cropend：结束裁剪事件。rotate：旋转事件。zoom：缩放事件。move：移动事件。
高级功能
除了基本的裁剪、旋转、缩放等功能外，cropperjs2 还支持以下高级功能：
限制裁剪框大小
var cropper = new Cropper(image, {
cropBoxResizable: false,
minCropBoxWidth: 300,
minCropBoxHeight: 200,
maxCropBoxWidth: 600,
maxCropBoxHeight: 400
});上述代码中，我们设置了 cropBoxResizable: false，禁止用户自由调整裁剪框大小；并设置了最小和最大的裁剪框宽高。
自定义裁剪框样式
/* 最终裁剪框元素的 class 前缀 */
.cropper-custom {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #39873c;
}var cropper = new Cropper(image, {
cropBoxMovable: false,
cropBoxResizable: false,
cropBoxClass: 'cropper-custom'
});上述代码中，我们定义了一个名为 .cropper-custom 的 CSS 样式类，并将它作为裁剪框的样式，该样式将裁剪框的背景颜色设为半透明白色，边框设为绿色。并在 JavaScript 中将裁剪框设为不可移动，不可调整大小，使用自定义样式。
裁剪框的预览
-- -------------------- ---- -------
-----
---- --------------- -------------
------
-----
---- ------ ------------------
------
--------
--- ----- - -----------------------------------
--- ------- - --- -------------- -
------------ -- - --
----- --------------- -
--- ------ - --------------------------
------ ----
------- --
---
--- ------------ - ----------------------------------------
---------------- - -------------------
-
---
---------上述代码中，我们增加了一个用于预览的 <img> 元素，并在 crop 事件中生成裁剪后的 canvas，然后将其转为 data URL，赋值给预览图片的 src 属性。
结语
本篇文章为大家介绍了 cropperjs2 的使用方法，包括安装和引入、基本使用、属性和方法、事件、以及一些高级功能。希望对大家有所帮助，同时也推荐其他强大的图片剪裁库，如 Jcrop 和 jQuery-cropper。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c5781e8991b448ebd87