How to center crop Images in Fabricjs? - image

Question

I'm able to add Images to the canvas using Fabric.js.
However, I have a fixed width & height for the image box.
The images will be added dynamically and their width and height would vary.
To make it consistent, I want to center crop the Image to fit the width and height of the image box.
How do I do that using Fabric.js?
Sample Images
Here is my code:
let newObj = {
"version": "4.6.0",
"objects": [{
type: 'image',
version: '4.6.0',
originX: 'left',
originY: 'top',
left: 24,
top: 24,
width: 250,
height: 250,
fill: 'rgb(0,0,0)',
scaleX: 0.49,
scaleY: 0.49,
visible: true,
backgroundColor: '',
fillRule: 'nonzero',
paintFirst: 'fill',
globalCompositeOperation: 'source-over',
src: 'https://logo.clearbit.com/mircrosoft.com?size=400',
crossOrigin: null,
filters: [],
scaleToWidth: 250,
scaleToHeight: 250
}],
"background": "#000000"
}
var canvas1 = new fabric.StaticCanvas("a", { width: 600, height: 400 });
canvas1.loadFromJSON(newObj, function() {
canvas1.renderAll();
});
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"></script>
<canvas id="a"></canvas>

Answer 1

I would recommend you that instead of cropping you should scale the original to fit the size you need, that way it works for big and small images, and it's a simple calculation.
In your sample you have hardcoded scaleX: 0.49 not sure why that, If the original image is quite large resolution that scale won't do much and center crop will get just a fraction of the image.
On my example below I'm assuming that your image box is a square, but if not you can use:
http://fabricjs.com/docs/fabric.Image.html#scaleX
http://fabricjs.com/docs/fabric.Image.html#scaleY
const canvas1 = new fabric.StaticCanvas("a", {width: 300, height: 200});
const image_url = 'https://logo.clearbit.com/mircrosoft.com?size=400'
new fabric.Image.fromURL(image_url, img => {
const size = 100
img.top = img.left = 20
img.scale(size/img.width);
canvas1.add(img);
canvas1.renderAll();
});
canvas {
border: solid 1px red
}
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"></script>
<canvas id="a"></canvas>