Watermark in sharp

[uoxiu]

The current version of image handler with sharp don't support the watermark?

[joebernard]

I'm confused as well. The docs seem to be out of date as they still reference Thumbor, yet do mention watermarking. Sharp has a composite function that seems to handle watermarking (basically an overlay), but I don't see how to expose it via SIH.

[hayesry]

Hey all - Apologies for the documentation issues, we've taken a look and realized that some parts weren't updated to align with v4's capabilities. We're in the process of publishing the updated docs and they should be online early this upcoming week.

For the watermarking feature, we've added a feature request to our board and expect to have that rolled out in the next minor release. It will probably look something like this:
overlayWith: {
. bucket: <watermarkImageBucket>,
. key: <watermarkImageKey>
. options: [Object object]
}
Such that you can source a watermark/overlay image from any bucket in your account and add positioning attributes, etc. as key-value pairs in the options property. Happy to hear any thoughts feedback on this from your perspective(s)!

[TuNi54]

Hi @hayesry,
thanks for your answer.

When you planned the next minor release please?

[Ehaic]

Any news on an update on the watermark feature?

[wingoo]

Any news on an update on the watermark feature?
thanks

[tientq88]

Hi all,
I created successfully an image with watermark with this parrameters.

{"bucket":"htvarts","key":"image.jpg","edits":{"overlayWith":{"bucket":"htvarts","key":"logo.png","options":{"top":90,"left":205}}}}

Create base64encode and try it.

[xiaoxie110]

Hi all,
I created successfully an image with watermark with this parrameters.

{"bucket":"htvarts","key":"image.jpg","edits":{"overlayWith":{"bucket":"htvarts","key":"logo.png","options":{"top":90,"left":205}}}}

Create base64encode and try it.

https://sharp.pixelplumbing.com/en/stable/changelog/#v0220-18th-march-2019
They have removed overlayWith previously deprecated in v0.22.0.！

[thadallender]

It would be nice if this package supported the intended use of the Sharp JS composite function. Unlike the deprecated overlayWith function in Sharp JS, the composite function supports multiple images, which can be used to generate much more complex (and useful) image composites.

In our case, we need to use the composite function to generate dynamic product previews, similar to the image attached below.

Can we composite multiple images as this package is currently written? It doesn't appear so.

[beomseoklee]

We have updated our solution, and I believe your issue has been fixed. If you still see the issue with the latest version (v4.2), please feel free to reopen the issue.

For the way how you can create a watermark, you can refer to the implementation guide Appendix D: List of Supported Thumbor Filters.

You can also refer to the recent changes here.

[adrienne]

@georgebearden this still doesn't entirely work, and it's still set up to use the overlayWith parameter instead of composite (as per the code here: https://github.com/awslabs/serverless-image-handler/blob/master/source/image-handler/image-handler.js )

There is no documentation about this, and I personally can get a basic overlay to work but as soon as i try to add {"options": { "top": 50 }} it fails completely (I don't even get an image at all, just a blank page with {} on it.)

[beomseoklee]

@adrienne Can you share the edits you used?

[eltonjothi]

@georgebearden this still doesn't entirely work, and it's still set up to use the overlayWith parameter instead of composite (as per the code here: https://github.com/awslabs/serverless-image-handler/blob/master/source/image-handler/image-handler.js )

There is no documentation about this, and I personally can get a basic overlay to work but as soon as i try to add {"options": { "top": 50 }} it fails completely (I don't even get an image at all, just a blank page with {} on it.)

same here..
this is what i used
{ "bucket": "bucket_name", "key": "img_key", "edits": { "overlayWith": { "bucket": "bucket_name", "key": "img_key", "options": { "top": 30, "left": 30 } } } }

[eltonjothi]

i can confirm options.top and options.left is returning blank page with {}

currently i am using the gravity option
{ "bucket": "bucket", "key": "key", "edits": { "overlayWith": { "bucket": "bucket", "key": "key", "options": { "gravity": "east" } } } }