写一个图片裁剪的js，JavaScript图片裁剪插件PlusCropper

在前端开发中，图片裁剪是一个常见的需求。本文将深入解析一个功能完善的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-cropperhttps://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);
});