Cropper.js：JS图像裁剪库

项目中用到的一个裁剪库，挺好用的，给大家推荐一下。

项目官网：fengyuanchen.github.io/cropperjs/z...

项目地址：github.com/fengyuanche...

一、Cropper.js 是什么？

Cropper.js是一个纯JavaScript实现的图像裁剪库，不依赖jQuery等第三方库，压缩后仅约28KB。它支持：

响应式设计，适配不同屏幕尺寸
触摸屏友好，完美支持移动设备
丰富的API和配置选项
支持旋转、缩放、翻转等操作
输出多种格式的裁剪结果

相较于其他图像处理库，Cropper.js的核心优势在于其专注裁剪功能，提供了流畅的用户体验和高度可定制的界面。

二、核心功能解析

1. 基础裁剪功能

javascript 复制代码

const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  viewMode: 1,
  autoCropArea: 0.8,
  responsive: true,
  restore: true
});

通过简单配置即可实现固定宽高比、自动裁剪区域设置等基础功能。

2. 图像变换操作

javascript 复制代码

cropper.rotate(45);     // 旋转45度
cropper.scaleX(-1);     // 水平翻转
cropper.zoom(0.1);      // 放大10%

支持程序化控制图像变换，为复杂交互提供可能。

3. 高质量输出

javascript 复制代码

const canvas = cropper.getCroppedCanvas({
  width: 800,
  height: 600,
  fillColor: '#fff',
  imageSmoothingEnabled: true
});

// 转换为Blob对象用于上传
canvas.toBlob(blob => {
  const formData = new FormData();
  formData.append('avatar', blob, 'avatar.jpg');
  
  // 上传到服务器
  fetch('/upload', { method: 'POST', body: formData });
});

支持生成Canvas对象并转换为多种格式（Blob、DataURL、ArrayBuffer）。

4. 事件系统

javascript 复制代码

cropper.on('crop', (event) => {
  console.log('裁剪框移动', event.detail);
});

cropper.on('zoom', (event) => {
  console.log('缩放操作', event.detail.ratio);
});

提供丰富的事件钩子，便于实现实时预览等高级功能。

三、完整实现示例

HTML结构

html 复制代码

<div class="container">
  <img id="source-image" src="image.jpg" alt="Source image">
</div>
<div class="preview-box">
  <div class="preview"></div>
</div>
<button id="crop-btn">裁剪并上传</button>

CSS样式

css 复制代码

.container {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
}

.preview-box {
  margin-top: 20px;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
}

JavaScript实现

javascript 复制代码

// 初始化Cropper
const image = document.getElementById('source-image');
const cropper = new Cropper(image, {
  aspectRatio: 1,  // 正方形裁剪
  preview: '.preview',
  viewMode: 2,
  dragMode: 'move',
  autoCrop: true,
  background: false,
  modal: true,
  guides: false
});

// 绑定裁剪按钮事件
document.getElementById('crop-btn').addEventListener('click', () => {
  const canvas = cropper.getCroppedCanvas({
    width: 400,
    height: 400,
    fillColor: '#fff'
  });
  
  // 显示裁剪结果
  const resultImage = new Image();
  resultImage.src = canvas.toDataURL('image/jpeg', 0.9);
  document.body.appendChild(resultImage);
  
  // 上传服务器
  canvas.toBlob(blob => {
    const formData = new FormData();
    formData.append('cropped_image', blob);
    
    fetch('/upload', {
      method: 'POST',
      body: formData
    }).then(response => {
      console.log('上传成功！', response);
    });
  }, 'image/jpeg', 0.9);
});

四、高级应用场景

1. 结合第三方库实现滤镜效果

javascript 复制代码

// 使用CamanJS添加滤镜
canvas.toDataURL('image/png', (dataUrl) => {
  Caman(dataUrl, function() {
    this.brightness(10).contrast(5).render(() => {
      this.toBlob(blob => {
        // 处理带滤镜的Blob
      });
    });
  });
});

2. 多裁剪区域选择

javascript 复制代码

// 创建多个Cropper实例
const mainCropper = new Cropper(mainImage, config);
const detailCropper = new Cropper(detailImage, {
  ...config,
  crop: (e) => {
    // 同步主裁剪区域
    mainCropper.setData(e.detail);
  }
});

3. 自定义裁剪框样式

css 复制代码

/* 覆盖默认样式 */
.cropper-crop-box {
  border-radius: 50%; /* 圆形裁剪框 */
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
}

.cropper-line {
  background-color: #ff6b6b;
}

.cropper-point {
  width: 15px;
  height: 15px;
  background-color: #4ecdc4;
}

五、性能优化建议

大图处理策略：

javascript 复制代码

// 使用URL.createObjectURL处理大文件
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const url = URL.createObjectURL(file);
  image.src = url;
  
  // 初始化Cropper后释放对象URL
  cropper.on('ready', () => URL.revokeObjectURL(url));
});

延迟加载：

javascript 复制代码

// 图片完全加载后再初始化
image.onload = () => {
  new Cropper(image, options);
};

销毁机制：

javascript 复制代码

// 组件卸载时销毁实例
function cleanUp() {
  cropper.destroy();
  image.src = '';
}

Cropper.js在前端图像处理领域展现出强大的实用价值：

轻量高效：核心代码精简，不依赖第三方库
功能完备：覆盖裁剪、旋转、缩放等核心需求
高度可定制：从UI样式到交互行为均可深度定制
跨平台：完美兼容桌面和移动端浏览器