lovell / lovell/sharp

Enhance composite with new functionalities (bottom, right)

Open
#3,309 1 comment 0 reactions 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

### What are you trying to achieve?

I am trying to apply a watermark on top of an image.

In my scenario, the watermark should go to the bottom right corner but with some margin (so `gravity: southeast` doesn't work; I know I could just add transparent pixels as a margin to the image, but that is not ideal).

The watermark could also have a opacity (that is not always the same value) so being able to set it as an option would be optimal (instead of creating multiple watermarks with different levels of opacity).

Last, the watermark should be resized in % based on the original image width (exactly like lightroom does when exporting). So if, for example, you set a watermark width 25% on a 500x500px image, the watermark will be 125px wide.

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

#3277 also talks about the bottom/right functionality on top of the existing top/left options

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

For `bottom` and `right`, they should work exactly like `top` and `left`
For `opacity`, it should be a number (either 0 to 100 or 0 to 1) where 0 is fully transparent (invisible) and 100 fully opaque.
For `width`, it could accept a number (to use as % of the image width) or a string so the user can specify the exact width in px or a width in % (`width: 250px` or `width: 25%`)

### What alternatives have you considered?

Having a different watermark image for each opacity, size and with margins... but that is for sure not optimal since I would need hundreds of different images.

Generating the watermark with sharp and editing it before passing it as Buffer to the image could solve the width and opacity issues... but being able to provide some simple options to the composite image would be more ideal.

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

The watermark is at the bottom/right corner with 10px margin, 75% opacity and its width is 10% of the image width.

![image](https://user-images.githubusercontent.com/46521712/181211673-939b7f31-21ef-4d2e-8268-6da2be70a3c4.png)

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

No source files, tests, or entry points are named in the issue. Start by reviewing the existing composite API and related issue #3277; completion would require agreed behavior for bottom/right offsets, opacity, and percentage or pixel width, plus tests for those options.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nodejs
Domain
api, computer-vision
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.