fabric.js 实现图片裁剪

fabric.js是一个强大的JavaScript库，用于创建基于HTML5 canvas的应用程序，包括图像编辑、绘画和拼贴功能。在fabric.js中，你可以很容易地实现图片裁剪功能，通常通过以下几个步骤：

1. **引入fabric.js库**：首先，在HTML文件中引入fabric.js库和CSS样式。

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.0.4/fabric.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.0.4/fabric.css">

2. **初始化canvas**：创建一个canvas元素，并使用fabric对象将其转换为可交互的画布。

var canvas = new fabric.Canvas('myCanvas', {
  backgroundColor: 'white',
});

3. **加载图片**：你可以通过`fabric.Image.fromURL`方法加载图片到画布上。

fabric.Image.fromURL('image.jpg', function(img) {
  img.set({ left: 50, top: 50 }); // 设置图片位置
  canvas.add(img); // 将图片添加到画布上
});

4. **启用裁剪功能**：fabric.js的Image对象有一个名为`interactivelyResize`的属性，可以设置它为true，允许用户拖拽四角或边框来裁剪图片。

img.interactivelyResize = true;

5. **监听缩放和裁剪事件**：当用户开始裁剪时，可以监听`object:scalingStarted`和`object:scalingFinished`等事件，根据需要调整裁剪区域。

6. **获取裁剪后的图片数据**：一旦裁剪完成，你可以从`canvas.getObjects()`中找到裁剪的图片，然后根据需求保存或处理它们。

canvas.on('object:modified', function(e) {
  var croppedImage = canvas.toDataURL(); // 获得裁剪后图片的URL
  console.log(croppedImage);
});