Cropper.js 使用教程：前端图片裁剪库 Cropper.js 从入门到实战

Cropper.js 简介

Cropper.js 是由开发者 Chen Fengyuan 开源的一个 JavaScript 图片裁剪库，主要用于在浏览器端实现图片裁剪、缩放、旋转等操作。它基于 HTML5 Canvas 技术，可以直接在客户端完成图片处理，因此被广泛应用于头像上传、图片编辑器、内容管理系统等场景。

• Cropper.js 官网：https://fengyuanchen.github.io/cropperjs/
• Cropper.js GitHub 地址：https://github.com/fengyuanchen/cropperjs

相比传统的图片裁剪方案，Cropper.js 具有以下优势：

• 纯 JavaScript 实现，无需依赖 jQuery
• 支持图片缩放、旋转、翻转等操作
• 支持移动端触控操作
• 提供丰富的 API（数十个配置项与方法）
• 可在浏览器端直接生成裁剪后的图片

此外，Cropper.js 具有良好的浏览器兼容性，支持 Chrome、Firefox、Safari、Edge 等主流浏览器。

Cropper.js 的核心功能

Cropper.js 的设计目标是提供一个功能完整且可扩展的图片裁剪工具，常见功能包括：

• 图片拖拽裁剪：用户可以自由拖动裁剪框
• 图片缩放：支持滚轮或手势缩放图片
• 旋转与翻转：支持旋转图片和镜像翻转
• 比例裁剪：支持 1:1、4:3、16:9 等固定比例
• 多实例支持：一个页面可以存在多个裁剪器
• Canvas 输出：可以将裁剪结果导出为 canvas 或 base64 图片

Cropper.js 提供了大量配置选项、方法和事件，开发者可以根据业务需求灵活定制裁剪行为。

安装 Cropper.js

在项目中使用 Cropper.js 通常有两种方式：NPM 安装 或 CDN 引入。

1、通过 NPM 安装

npm install cropperjs

然后在项目中引入：

import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";

2、通过 CDN 引入

<link rel="stylesheet" href="cropper.css">
<script src="cropper.js"></script>

在简单网页项目或演示项目中，CDN 引入方式更加方便。

Cropper.js 基本使用示例

下面是一个最基础的 Cropper.js 图片裁剪示例。

1、HTML 结构

<div class="container">
  <img id="image" src="example.jpg">
</div>

<button id="crop">获取裁剪图片</button>

const image = document.getElementById('image');

const cropper = new Cropper(image, {
  aspectRatio: 1,
  viewMode: 1,
  movable: true,
  zoomable: true,
  scalable: true
});

• aspectRatio：裁剪比例，例如 1:1
• viewMode：裁剪框限制模式
• movable：是否允许移动图片
• zoomable：是否允许缩放
• scalable：是否允许翻转

获取裁剪后的图片

document.getElementById("crop").onclick = function () {
  const canvas = cropper.getCroppedCanvas({
    width: 300,
    height: 300
  });

  const croppedImage = canvas.toDataURL("image/png");

  console.log(croppedImage);
};

常见用法包括：

• 上传头像前进行裁剪
• 将 Base64 图片上传到服务器
• 生成缩略图

常用 API 方法

Cropper.js 提供了丰富的操作方法，例如：

• 缩放图片：cropper.zoom(0.1);
• 旋转图片：cropper.rotate(90);
• 重置裁剪：cropper.reset();
• 销毁实例：cropper.destroy();

典型应用场景

Cropper.js 在 Web 开发中的应用非常广泛，例如：

• 用户头像裁剪
• CMS 图片上传裁剪
• 电商商品图片编辑
• 在线图片编辑工具
• 富媒体编辑器

由于裁剪逻辑在浏览器端完成，可以减少服务器压力，同时提高用户体验。

总结

Cropper.js 是目前前端开发中最流行的图片裁剪库之一。它提供了丰富的 API 和灵活的配置选项，可以轻松实现头像裁剪、图片编辑和缩略图生成等功能。通过简单的几行代码，就可以在 Web 项目中集成一个功能强大的图片裁剪工具。对于需要处理图片上传或编辑功能的网站来说，Cropper.js 是一个稳定、成熟且易于使用的解决方案。