上手 cropperjs v2：一个优雅的图片裁剪解决方案

最近在开发一个需要图片编辑功能的项目，偶然发现了 cropperjs 这个优秀的图片裁剪库。经过一番体验，我发现它不仅功能强大，而且 API 设计十分优雅。今天就来分享一下我的使用心得。

什么是 cropperjs？

下面这一段是来自官网的介绍：

Cropper.js 2.0 是一系列用于图像裁剪的 Web 组件。

• Cropper.js 1.0 和 Cropper.js 2.0 有什么区别？

• Cropper、Cropper.js 和 jQuery Cropper 之间有什么区别？

安装与引入

npm install cropperjs@next

或者直接通过 CDN 引入：

<script src="https://unpkg.com/cropperjs@next"></script>

基本使用

先来看一个我在项目中使用的例子：

<cropper-canvas ref="canvas" background>
  <cropper-image ref="image" translatable :src="src"></cropper-image>
  <cropper-handle action="select" plain></cropper-handle>
  <cropper-selection initial-coverage="1">
    <cropper-grid role="grid" bordered covered></cropper-grid>
    <cropper-crosshair centered></cropper-crosshair>
    <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0)"></cropper-handle>
  </cropper-selection>
</cropper-canvas>

背景色：<el-color-picker v-model="canvasBg" />

这段代码创建了一个完整的图片裁剪界面，包含了画布、图像、选择手柄、网格线、十字准星和背景颜色选择器。

核心功能解析

1. 画布与图像

cropper-canvas 组件作为裁剪容器，cropper-image 用于显示要裁剪的图片。translatable 属性允许图片可移动，initial-coverage="1" 确保选择区域初始覆盖整个图片。

2. 交互元素

• cropper-handle：提供拖拽手柄，支持选择、移动等操作
• cropper-grid：添加网格线，辅助精确裁剪
• cropper-crosshair：十字准星，帮助定位

3. 背景色处理

一个有趣的需求是：当导出 JPEG 格式时，需要处理透明背景。我的解决方案是：

const confirmClip = async () => {
  const originalCanvas = await canvasRef.value.$toCanvas()
  const offScreenCanvas = document.createElement("canvas")
  offScreenCanvas.width = originalCanvas.width
  offScreenCanvas.height = originalCanvas.height
  const ctx = offScreenCanvas.getContext("2d")
  // 由于需要储存的是jpeg文件，这里根据选择的背景色做下处理，否则默认是个黑底
  ctx.fillStyle = canvasBg.value
  ctx.fillRect(0, 0, offScreenCanvas.width, offScreenCanvas.height)
  ctx.drawImage(originalCanvas, 0, 0)

  const dataURL = offScreenCanvas.toDataURL("image/jpeg")
  return {
    dataURL
  }
}

这段代码创建了一个离屏 canvas，先用选择的背景色填充，再绘制裁剪后的图像，完美解决了 JPEG 格式不支持透明度的问题。

更多实用功能

cropperjs 还提供了许多其他实用功能：

• 多种裁剪比例预设
• 旋转、缩放图像
• 裁剪框限制
• 按需导入

总结

cropperjs v2 是一个功能全面、易于使用的图片裁剪解决方案。它的组件化设计让开发者可以灵活组合所需功能，而丰富的 API 则能满足各种复杂需求。

在我的实际使用中，体验是不错的，所以下一篇文章我会分享如何使用这个裁剪器来构建一个图片编辑器，敬请期待！

参考资源：

• cropperjs 官网