sharp icon indicating copy to clipboard operation
sharp copied to clipboard

Enhance composite with new functionalities (bottom, right)

Open wc-davide opened this issue 2 years ago • 1 comments

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

wc-davide avatar Jul 27 '22 09:07 wc-davide

I can see the value in exposing bottom and/or right and use these to calculate values for top and/or left on-the-fly, as the dimensions might not be known, and this is probably a common-enough use case. Happy to accept a PR, if you're able.

I'm less sure about adding opacity as full control is already available over this - images to be composited can use an alpha channel. Resizing images during composition would introduce way too much complexity, sorry.

lovell avatar Jul 27 '22 09:07 lovell