I Cannot make to work cropImage() as I want about sharp

[lovell]

Did you see the gravity and position options of resize()?

https://sharp.pixelplumbing.com/api-resize

You'll probably want either position: 'left top' or gravity: 'northwest'.

(attention is a "smartcrop" strategy and is content-dependent, so probably won't do what you want consistently.)

[rocc-o]

Perhaps I managed to obtain the desired result with position: 'left top' even with remote images over 4,000 pixels wide. Maybe then around 6,000 pixels everything falls apart, I'll know when I get there. Thank you.

async function cropImage(imageData, width, height) {
    try {
        console.log('Cropping image with width:', width, 'and height:', height);

        return await sharp(imageData)
            .resize({ width, height, fit: 'cover', position: 'left top' })
            .toBuffer();
    } catch (error) {
        console.error('Error cropping image:', error);
        throw new Error('Error cropping image:', error);
    }
}

[rocc-o]

Solved, I guess. If somenone know a better and more polished way please tell me.

// Function to crop the image
async function cropImage(imageData, width, height) {
    try {
        console.log('Cropping image with width:', width, 'and height:', height);

        return await sharp(imageData)
            .resize({ width, height, fit: 'cover', position: sharp.strategy.attention })  // Crop from top-left corner
            .toBuffer();
    } catch (error) {
        console.error('Error cropping image:', error);
        throw new Error('Error cropping image:', error);
    }
}

[rocc-o]

Yes, I tried both, but the result wasn't very satisfactory, perhaps because the remote URLs I'm processing aren't all the same size. I've noticed that remote images up to 2557 pixels wide are cropped from the top, and that's the desired result, but as it starts to reach about 4,000 pixels wide the crop starts to move towards the centre.