Cropper.js 是一个功能丰富的 JavaScript 图片裁剪库，允许用户轻松地在网页上进行图片裁剪操作。它支持现代浏览器以及 IE 9+，提供了灵活的 API 接口，可以处理各种图片裁剪需求。
特点
- 响应式设计：Cropper.js 可以自动适应不同的屏幕尺寸。
- 多种操作：支持旋转、缩放、移动和裁剪图片。
- 高性能：使用纯 JavaScript 实现，具有良好的性能表现。
- 丰富的配置选项：提供多种配置选项，满足不同使用场景。
- 事件处理：支持多种事件，如裁剪开始、裁剪结束等，便于进行自定义操作。
使用场景
- 图片编辑工具：为用户提供简单的图片裁剪功能。
- 头像上传：用户上传并裁剪头像图片。
- 在线相册：用户在上传照片时进行裁剪和调整。
安装方式
可以通过 npm 安装 Cropper.js：
npm install cropperjs
也可以通过 CDN 引入：
<script src="https://unpkg.com/cropperjs"></script>
使用示例
在 HTML 中包含一个图片元素：
<img id="image" src="path/to/image.jpg" alt="Picture">
在 JavaScript 中初始化 Cropper 实例：
import Cropper from 'cropperjs';
const image = document.getElementById('image');
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.width);
console.log(event.detail.height);
},
});
常用 API 介绍
- enable()：启用裁剪框。
- disable()：禁用裁剪框。
- destroy()：销毁 Cropper 实例。
- crop()：开始裁剪。
- reset()：重置裁剪区域。
- clear()：清除裁剪框。
- replace(url, hasSameSize)：替换裁剪图片的 URL。
- move(x, y)：移动图片。
- moveTo(x, y)：移动到指定坐标。
- zoom(ratio)：缩放图片。
- zoomTo(ratio, pivot)：缩放到指定比例。
- rotate(degree)：旋转图片。
- rotateTo(degree)：旋转到指定角度。
- scale(scaleX, scaleY)：按比例缩放图片。
- scaleX(scaleX)：按 X 轴缩放图片。
- scaleY(scaleY)：按 Y 轴缩放图片。
- getData(rounded)：获取裁剪数据。
- setData(data)：设置裁剪数据。
- getContainerData()：获取容器数据。
- getImageData()：获取图片数据。
- getCanvasData()：获取画布数据。
- setCanvasData(data)：设置画布数据。
- getCropBoxData()：获取裁剪框数据。
- setCropBoxData(data)：设置裁剪框数据。
- setAspectRatio(aspectRatio)：设置裁剪框的宽高比。
- setDragMode(mode)：设置拖拽模式（none, crop, move）。
官方资料