Fabric Js crop from left

Im writing a crop functionality for my fabric Js module in Angular.

addImage(event: Event) {
const input = event.target as HTMLInputElement;
if (input.files && input.files[0]) {
const file = input.files[0];
const reader = new FileReader();

reader.onload = (e) => {
const imgData = e.target?.result as string;

fabric.Image.fromURL(imgData).then((img) => {

if (img.width! > img.height!) {
img.scaleToWidth(this.viewportWidth);
} else {
img.scaleToHeight(this.viewportHeight);
}


img.set({
left: (800 - this.viewportWidth) / 2 + this.viewportWidth / 2 - (img.getScaledWidth() / 2),
top: (600 - this.viewportHeight) / 2 + this.viewportHeight / 2 - (img.getScaledHeight() / 2),
hasControls: true,
hasBorders: true,
selectable: true,
_controlsVisibility: {
tl: true,
tr: true,
bl: true,
br: true,
mt: true,
mb: true,
ml: false,
mr: false,
mtr: false
},
controls: {
...fabric.FabricText.createControls().controls,
rightCrop: new fabric.Control({
x: 0.5,
y: 0,
actionHandler: this.changeWidthRigth,
render : this.renderIcon
}),
leftCrop: new fabric.Control({
x: -0.5,
y: 0,
actionHandler: this.changeWidthLeft,
render : this.renderIcon
})
}
});

this.canvas.add(img);
this.canvas.setActiveObject(img);
this.canvas.renderAll();
});
};

reader.readAsDataURL(file);
}


Cropping from the right works pretty good.

changeWidthRigth(eventData: any, transform: any, x: any, y: any) {
const object = transform.target;

if (!object.hasOwnProperty('_originalData')) {
object._originalData = {
left: object.left,
width: object.width,
mouseX: eventData.clientX || 0
};
}

const currentMouseX = eventData.clientX || 0;
const mouseDeltaX = currentMouseX - object._originalData.mouseX;

const sensitivity = 8.0;
const newWidth = Math.max(20, object._originalData.width + (mouseDeltaX * sensitivity));

object.set({
width: newWidth
});

object.canvas.requestRenderAll();

return true;


But on the left side I couldnt get it to work sadly. That side is more complicated than I imagined you have to change the left property and be static on the right side, so the left side of the image is being cropped. How would you write the changeWidthLeft() method?

Continue reading...