How to Crop Functionality using FabricJs

When implementing cropping functionality with Fabric.js, it can be achieved through the following steps:

1. Initialize the canvas and add an image

First, create a <canvas> element in HTML, then initialize the canvas using Fabric.js and load an image onto it.

html
<canvas id="c" width="800" height="600"></canvas>

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

fabric.Image.fromURL('path/to/image.jpg', function(img) {
    img.set({
        left: 100,
        top: 100,
        selectable: false // Set to false if the image should not be movable
    });
    canvas.add(img);
});

2. Create a cropping area

Next, use Fabric.js's Rect or other shapes to create a cropping area, which defines the region to be cropped.

javascript
var clipRect = new fabric.Rect({
    left: 150,
    top: 150,
    fill: 'rgba(0,0,0,0.3)',
    width: 200,
    height: 200,
    selectable: false
});
canvas.add(clipRect);

3. Crop the image

When performing the cropping operation, configure the image object on the canvas to display only the portion within the cropping area. This is typically implemented by setting the image's clipTo method.

javascript
img.clipTo = function(ctx) {
    ctx.rect(
        clipRect.left - img.left,
        clipRect.top - img.top,
        clipRect.width,
        clipRect.height
    );
};
canvas.renderAll();

4. User Interaction

To enhance user experience, add interactive features that allow users to move or resize the cropping area.

javascript
clipRect.set({
    selectable: true
});

// Re-render the canvas when the cropping area is moved or resized
clipRect.on('modified', function() {
    canvas.renderAll();
});

5. Export the Cropped Image

Finally, after cropping, users can export the cropped image. This can be done by converting the canvas content to a DataURL.

javascript
var croppedImg = canvas.toDataURL({
    format: 'png',
    left: clipRect.left,
    top: clipRect.top,
    width: clipRect.width,
    height: clipRect.height
});

Thus, we have implemented basic image cropping functionality using Fabric.js. Additionally, more complex operations can be added based on requirements, such as rotating the cropping area or multi-shape cropping.