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

news2025/3/12 19:52:59

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