在前端开发中，图片裁剪是一个常见的需求。本文将深入解析一个功能完善的JavaScript图片裁剪插件——PlusCropper，带你一步步了解其实现原理和使用方法。
一、插件概述
PlusCropper是一个轻量级的JavaScript插件，它允许用户在网页上交互式地裁剪图片。它提供了以下功能：
- 可拖拽和缩放的裁剪框: 用户可以通过鼠标或触摸操作来调整裁剪区域的大小和位置。
- 图片旋转: 支持图片的顺时针和逆时针旋转。
- 图片缩放: 支持图片的放大和缩小，方便用户精确定位裁剪区域。
- 移动端友好: 支持触摸事件，可在移动设备上流畅运行。
- 自定义回调函数: 提供
onShow、onHide和onCrop回调函数，方便用户在裁剪框显示、隐藏和裁剪完成后执行自定义操作。
二、核心代码解析
1. 插件结构
PlusCropper插件的核心是一个名为PlusCropper的对象，该对象包含了插件的所有配置选项、方法和状态变量。
复制代码
const PlusCropper = {// 配置选项options: {// ...},// 回调函数onShowCallback: null,onHideCallback: null,onCropCallback: null,// 状态变量isDragging: false,isResizing: false,// ...// 初始化函数// init: function (options = {}) { // // ...// },// 显示裁剪框show: function (options = {}) {// ...},// 创建裁剪框元素createElements: function () {// ...},// 绑定事件bindEvents: function () {// ...},// 隐藏裁剪框hide: function () {// ...},// 裁剪图片cropImage: function () {// ...},// 设置回调函数onShow: function (callback) {// ...},onHide: function (callback) {// ...},onCrop: function (callback) {// ...},// 工具函数getRotatedRect: function (x, y, width, height, angle) {// ...},rotateRightAngle: function (degrees) {// ...},// ...
};
2. 配置选项
options属性用于存储插件的配置选项，包括：
container: 裁剪框的父容器，可以是DOM元素或选择器字符串。imageSrc: 待裁剪图片的URL地址。cropAreaWidth: 裁剪区域的初始宽度。cropAreaHeight: 裁剪区域的初始高度。
3. 回调函数
PlusCropper提供了三个回调函数：
onShowCallback: 裁剪框显示时触发。onHideCallback: 裁剪框隐藏时触发。onCropCallback: 图片裁剪完成后触发，并将裁剪后的图片DataURL作为参数传递给回调函数。
4. 状态变量
isDragging、isResizing等状态变量用于跟踪裁剪框和图片的操作状态，例如是否正在拖动、调整大小等。
5. 初始化函数
init函数用于初始化插件，创建和配置裁剪框。由于代码中直接使用 show 方法代替了初始化，因此 init 函数可以省略。
6. 显示裁剪框 (show)
show函数用于显示裁剪框。它会首先合并传入的配置选项，然后创建裁剪框元素，绑定事件，最后将裁剪框设置为可见。
复制代码
show: function (options = {}) {// 合并配置选项this.options = Object.assign(this.options, options);// ...this.createElements();this.bindEvents();this.overlay.style.display = "flex";// ...
},
7. 创建裁剪框元素 (createElements)
createElements函数负责创建裁剪框的所有HTML元素，包括：
overlay: 覆盖整个页面的半透明蒙版。cropperContainer: 包裹裁剪框和图片的容器。cropingImage: 待裁剪的图片元素.cropArea: 可拖拽和缩放的裁剪区域。resizeHandles: 位于裁剪区域四周和右下角的拖动点，用于调整裁剪区域的大小。buttonContainer: 包裹操作按钮的容器。cropBtn: 确认裁剪按钮。rotateLeftBtn: 逆时针旋转按钮。rotateRightBtn: 顺时针旋转按钮。
8. 绑定事件 (bindEvents)
bindEvents函数负责为裁剪框元素绑定各种事件，包括：
- 拖动裁剪框: 监听
mousedown/touchstart、mousemove/touchmove和mouseup/touchend事件，实现裁剪框的拖动。 - 调整裁剪框大小: 监听
mousedown/touchstart、mousemove/touchmove和mouseup/touchend事件，实现裁剪区域大小的调整。 - 裁剪图片: 监听
click事件，触发cropImage函数进行图片裁剪。 - 旋转图片: 监听旋转按钮的
click事件，调用rotateImage函数进行图片旋转。 - 缩放图片: 监听鼠标滚轮事件或移动端双指缩放手势，调用
scaleImage函数进行图片缩放。
9. 隐藏裁剪框 (hide)
hide函数用于隐藏裁剪框，并将裁剪框元素从页面中移除。
10. 裁剪图片 (cropImage)
cropImage函数是裁剪图片的核心逻辑，它会创建一个canvas元素，将裁剪区域的图片绘制到canvas上，并将canvas转换为DataURL格式，最后通过onCropCallback回调函数返回给用户。
11. 工具函数
PlusCropper还包含一些工具函数，例如:
getRotatedRect: 计算旋转后的矩形坐标。rotateRightAngle: 将图片旋转90度的倍数。rotateImage: 按照指定角度旋转图片。scaleImage: 按照指定比例缩放图片。
三、使用方法
我已经发布npm安装包，node.js中直接使用npm安装plus-cropper
https://github.com/geekgarry/plus-cropper
使用PlusCropper插件非常简单，只需要按照以下步骤操作：
- 引入
PlusCropper.js文件到你的HTML页面中。 - 创建一个
PlusCropper实例，并传入配置选项。 - 调用
show方法显示裁剪框。 - 在
onCrop回调函数中获取裁剪后的图片DataURL。
复制代码
// 创建 PlusCropper 实例
const cropper = Object.create(PlusCropper);// 显示裁剪框
cropper.show({container: '#cropper-container',imageSrc: 'images/example.jpg',cropAreaWidth: 200,cropAreaHeight: 150,
});// 设置裁剪回调函数
cropper.onCrop(function (croppedImageDataURL) {// 在这里处理裁剪后的图片console.log(croppedImageDataURL);
});
四、总结
PlusCropper是一个功能完善且易于使用的JavaScript图片裁剪插件。通过本文的深度解析，相信你已经对其内部实现机制有了更深入的了解，并能够将其应用到实际项目中。