Is it possible to crop with coordinates provided from the front-end?

I am using a cropping tool on the front-end with react.js called react-avatar-editor. It can crop the image on the front-end, but long story short, I will be cropping and manipulating very large images so I need to do it on the server. The package provides certain coordinates and parameters below which I can use on the server.

Is it easy to achieve accurate cropping with sharp package when I have a list of coordinates that I am provided below?

The ‘x’ and ‘y’ coordinates tell me at which point to start cropping from bottom left corner and ‘height’ and ‘width’ parameters tell me how far the top right corner is where to end the cropping.

Any help would be greatly appreciated!

{
   height: 1,
   width: 0.5979381443298969,
   x: 0.24318114874815838,
   y: 0
}

To give more context on numbers above, let’s say we have a 400px (h) x 600px (w) image. ‘x’ and ‘y’ tell me to start cropping at bottom left proportionally so around 125px (24%) to the right and 0px (0%) from the bottom. the height tells me to crop until to the very top of the image 400px (1 in height) and 0.59 (or 59%) to the right which around 300px.

[lovell]

Hello, perhaps try something like the following (untested):

const image = sharp(input);
image.metadata()
  .then(metadata => {
    // perform your calculations based on metadata.width and metadata.height
    const left = ?, top = ?, width = ?, height = ?;
    return image
      .extract({ left, top, width, height })
      .toBuffer();
  })
  .then(data => {
    // data is a Buffer containing your extracted image
  });

[markgoho]

@simeyla in 2015 a new version of Javascript came out that allows you to create objects with that syntax. If the property name and variable being set as the value have the same name you can write it without duplicating the value each time.

{ 
  top: top, 
  left: left 
}

is exactly equivalent to

{
  top,
  left
}