Sharp: Resize position (object-position) with pixel values

Created on 4 Apr 2019  路  5Comments  路  Source: lovell/sharp

What are you trying to achieve?

The documentation for Resize states that you can use object-position CSS properties:

sharp.strategy: cover only, dynamically crop using either the entropy or attention strategy. Some of these values are based on the object-position CSS property
example: object-position: 250px 125px;

but trying to use:
sharp(input.jpg).resize(400, 400, { fit: "cover", position: "250px 125px" });

this gives an error:
Error: Expected valid position/gravity/strategy for position but received 250px 125px of type string

question

Most helpful comment

ImageMagick's crop operation is equivalent to sharp/libvips' extract operation:

https://sharp.pixelplumbing.com/en/stable/api-resize/#extract

The equivalent of magick convert -crop 650x400+50+180 +repage 'original.png' 'processed.png' would be:

```javascript
await sharp('original.png')
.extract({ top: 50, left: 180, width: 650, height: 400 })
.toFile('processed.png');

All 5 comments

Hi, some but not all object-position CSS values are available.

The documentation currently says "Some of these values are based on the object-position CSS property". Happy to accept a PR to make the docs clearer.

You may want to try a combination of extract and resize for this scenario.

Could you give an example of this please.

Yeah I came across the same issue... after some mins of trail and error including reading test code I found that the doc means it "as is". So you can tell position: "left top" to use the index 0,0 from top left position, but you can't give position x,y as numbers. What you can do is call .resize() twice. One time with "top left" starting position and another time with "bottom right" starting position. I tried and struggled with crop vs. resize because for whatever reason .crop() is not a function in my installed version. So I found this is a lil too much fighting with the library for me and I went with:

    child_process.exec(`magick convert -crop 650x400+50+180  +repage 'original.png' 'processed.png'`, (err, stdout, stderr) => {
            if (err) throw err;

            fs.unlinkSync(`original.png`);
    });

Which is doing the exact same thing in high-speed as well and suits my needs.

Side note: imagemagick needed http://www.imagemagick.org/Usage/crop/

ImageMagick's crop operation is equivalent to sharp/libvips' extract operation:

https://sharp.pixelplumbing.com/en/stable/api-resize/#extract

The equivalent of magick convert -crop 650x400+50+180 +repage 'original.png' 'processed.png' would be:

```javascript
await sharp('original.png')
.extract({ top: 50, left: 180, width: 650, height: 400 })
.toFile('processed.png');

@lovell Thank you, that's awesome!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jaydenseric picture jaydenseric  路  3Comments

terbooter picture terbooter  路  3Comments

Andresmag picture Andresmag  路  3Comments

AVVS picture AVVS  路  3Comments

genifycom picture genifycom  路  3Comments