使用fabric.js 快速开发一个图片编辑器

Fabric.js 是一个强大的 JavaScript 库，它提供了一个简单的接口来实现画布（canvas）操作，使得在 web 页面上进行图形绘制和图片编辑变得容易。以下是使用 Fabric.js 开发一个基本图片编辑器的步骤：

1. **引入 Fabric.js**：
   在你的 HTML 文件中引入 Fabric.js 的库文件。

   ```html
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.6.0/fabric.min.js"></script>
   ```

2. **创建画布**：
   在 HTML 中添加一个 `canvas` 元素，并设置一个 ID，以便后续可以通过 JavaScript 访问。

   ```html
   <canvas id="canvas" width="600" height="400" style="border:1px solid #ccc"></canvas>
   ```

3. **加载图片**：
   使用 Fabric.js 的 `Image` 对象来加载图片，并将其添加到画布上。

   ```javascript
   var canvas = new fabric.Canvas('canvas');

   var img = new Image();
   img.crossOrigin = 'anonymous';
   img.src = 'path/to/your/image.jpg';

   img.onload = function() {
     var imgInstance = new fabric.Image(img, {
       left: 50,
       top: 50,
       scaleX: 0.5,
       scaleY: 0.5
     });
     canvas.add(imgInstance);
     canvas.renderAll();
   };
   ```

4. **添加绘图工具**：
   实现基本的绘图工具，如线条、矩形、圆形等。

   ```javascript
   var isDrawing = false;
   var startPoint = { x: 0, y: 0 };

   canvas.on('mouse:down', function(options) {
     isDrawing = true;
     startPoint = { x: options.e.offsetX, y: options.e.offsetY };
   });

   canvas.on('mouse:move', function(options) {
     if (isDrawing) {
       var pointer = canvas.getPointer(event);
       var rect = new fabric.Rect({
         left: startPoint.x,
         top: startPoint.y,
         width: pointer.x - startPoint.x,
         height: pointer.y - startPoint.y,
         fill: 'red',
         opacity: 0.5
       });
       canvas.add(rect);
       canvas.renderAll();
     }
   });

   canvas.on('mouse:up', function() {
     isDrawing = false;
   });
   ```

5. **实现图片编辑功能**：
   提供旋转、缩放、移动等编辑功能。

   ```javascript
   // 旋转
   function rotateImage() {
     var activeObject = canvas.getActiveObject();
     if (activeObject) {
       activeObject.setAngle(activeObject.angle + 10);
       canvas.renderAll();
     }
   }

   // 缩放
   function scaleImage() {
     var activeObject = canvas.getActiveObject();
     if (activeObject) {
       activeObject.set({ scaleX: activeObject.scaleX * 1.1, scaleY: activeObject.scaleY * 1.1 });
       canvas.renderAll();
     }
   }

   // 移动
   function moveImage(dx, dy) {
     var activeObject = canvas.getActiveObject();
     if (activeObject) {
       activeObject.set({ left: activeObject.left + dx, top: activeObject.top + dy });
       canvas.renderAll();
     }
   }
   ```

6. **保存编辑后的图片**：
   提供一个按钮来保存编辑后的图片。

   ```html
   <button οnclick="saveCanvas()">保存图片</button>

   <script>
     function saveCanvas() {
       var data = canvas.toDataURL({ format: 'png' });
       var link = document.createElement('a');
       link.download = 'edited-image.png';
       link.href = data;
       link.click();
     }
   </script>
   ```

以上步骤提供了一个基本的图片编辑器框架，你可以在此基础上添加更多的功能，如颜色选择、图层管理、滤镜效果等。记得在实际应用中，要根据自己的需求调整代码和样式。