lovell / lovell/sharp

Resize position using percentages

Open
#4,461 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
32.7k
Forks
1.4k
Avg merge
1d 14h
Merged PRs (30d)
5

Description

## Feature request

When resizing images with `cover`, it's possible to define an origin position, which by default is `centre`. Other options are `top`, `right top`, `right`, etc. I'd like to be able to use percentages for a more precise position. For example `25% 75%`.

### What are you trying to achieve?

I want to be able to generate different image sizes maintaining a precise centered position. And sometimes it's not 0% (left) or 50% (center) but something between. This is something that `object-position` allows to do.

### When you searched for similar feature requests, what did you find that might be related?

According to the docs, there are other ways to define the center, using gravity or strategy, that are fine for automated resizing. But I couldn't find any way to set specific coordinates.

### What would you expect the API to look like?

Something like this:

```js
sharp(input)
.resize(200, 300, {
fit: 'cover',
position: '25% 75%',
})
```

Or maybe an array of float values:

```js
sharp(input)
.resize(200, 300, {
fit: 'cover',
position: [0.25, 0.75],
})
```

### What alternatives have you considered?

None

### Please provide sample image(s) that help explain this feature

The [hero image in this page](https://jlantunez.com/columnas/archivos/riqueza/) has a background-position of 30% horizontal and 25% vertical, to show always the head of Cleopatra at any size.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the sharp(input).resize entry point and review how fit: 'cover' currently handles position values. Determine how percentage coordinates should map to the crop, then update the API documentation and add coverage for representative horizontal and vertical percentages. Done means a documented percentage position is accepted and produces the requested focal position.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
backend-api-design, computer-graphics
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.