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" } } } }

[beomseoklee]

@adrienne and @eltonjothi
Thanks for waiting, and I found what causes an issue. I will add the fix to the next release.
Once again, thanks for your inputs, and I'm sorry for your inconvenience.

[emeagenciadigital]

@adrienne and @eltonjothi
Thanks for waiting, and I found what causes an issue. I will add the fix to the next release.
Once again, thanks for your inputs, and I'm sorry for your inconvenience.

Is this working now and how should we use it ?

[emeagenciadigital]

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" } } } }

Did you manage to make it work and how ? Thanks !

[beomseoklee]

@emeagenciadigital Thanks for reaching out to us. Unfortunately, we haven't released the update. Once it's done, this issue would be fixed.

[chryssalid]

@beomseoklee any news on this topic? The Appendix D still only refers to Thumbor filters. How to use watermark/composite feature?

[psdty]

Hope to fix the watermark function, thank you very much!

[eltonjothi]

Hope to fix the watermark function, thank you very much!

@beomseoklee any news on this topic? The Appendix D still only refers to Thumbor filters. How to use watermark/composite feature?

I have made a detailed guide, how i have tried to add watermarks.
https://medium.com/@elton.jj/watermarks-with-aws-serverless-image-handler-6c24f4700e2d

[psdty]

Hope to fix the watermark function, thank you very much!

@beomseoklee any news on this topic? The Appendix D still only refers to Thumbor filters. How to use watermark/composite feature?

I have made a detailed guide, how i have tried to add watermarks.
https://medium.com/@elton.jj/watermarks-with-aws-serverless-image-handler-6c24f4700e2d

Thank you very much. I can implement the text watermark after redeploying according to your guide, but the final text watermark image is not displayed normally, just like the output of the image address below, the text of the watermark is just ordinary alphabetic characters.

https://d3cdm6t5czvhoc.cloudfront.net/eyJidWNrZXQiOiJ0ZXN0c2cuYW9zdGF0aWMuY29tIiwia2V5IjoiaW1hZ2UvMDA1LzAzNzJhNzE2ZjY4MWE2NGQ3MWFmNTZjMjBkZGViOGMwLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJoZWlnaHQiOjc1MCwiZml0IjoiaW5zaWRlIn0sIlR4dFdhdGVybWFyayI6eyJvcHRpb25zIjp7Im5hbWUiOiJhbGFsYWxhbGFsYWxhbGFsYWxhbGFsYWwiLCJncmF2aXR5IjoiY2VudGVyIn19fX0=

Is it related to the font?

[eltonjothi]

Hope to fix the watermark function, thank you very much!

@beomseoklee any news on this topic? The Appendix D still only refers to Thumbor filters. How to use watermark/composite feature?

I have made a detailed guide, how i have tried to add watermarks.
https://medium.com/@elton.jj/watermarks-with-aws-serverless-image-handler-6c24f4700e2d

Thank you very much. I can implement the text watermark after redeploying according to your guide, but the final text watermark image is not displayed normally, just like the output of the image address below, the text of the watermark is just ordinary alphabetic characters.

https://d3cdm6t5czvhoc.cloudfront.net/eyJidWNrZXQiOiJ0ZXN0c2cuYW9zdGF0aWMuY29tIiwia2V5IjoiaW1hZ2UvMDA1LzAzNzJhNzE2ZjY4MWE2NGQ3MWFmNTZjMjBkZGViOGMwLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJoZWlnaHQiOjc1MCwiZml0IjoiaW5zaWRlIn0sIlR4dFdhdGVybWFyayI6eyJvcHRpb25zIjp7Im5hbWUiOiJhbGFsYWxhbGFsYWxhbGFsYWxhbGFsYWwiLCJncmF2aXR5IjoiY2VudGVyIn19fX0=

Is it related to the font?

I have updated the post, and also the code to support more options to tweak your watermark.. Please have a look at the section where you need to add the font config in the source/image-handler/fonts/fonts.conf

[psdty]

Hope to fix the watermark function, thank you very much!

@beomseoklee any news on this topic? The Appendix D still only refers to Thumbor filters. How to use watermark/composite feature?

I have made a detailed guide, how i have tried to add watermarks.
https://medium.com/@elton.jj/watermarks-with-aws-serverless-image-handler-6c24f4700e2d

Thank you very much. I can implement the text watermark after redeploying according to your guide, but the final text watermark image is not displayed normally, just like the output of the image address below, the text of the watermark is just ordinary alphabetic characters.
https://d3cdm6t5czvhoc.cloudfront.net/eyJidWNrZXQiOiJ0ZXN0c2cuYW9zdGF0aWMuY29tIiwia2V5IjoiaW1hZ2UvMDA1LzAzNzJhNzE2ZjY4MWE2NGQ3MWFmNTZjMjBkZGViOGMwLmpwZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJoZWlnaHQiOjc1MCwiZml0IjoiaW5zaWRlIn0sIlR4dFdhdGVybWFyayI6eyJvcHRpb25zIjp7Im5hbWUiOiJhbGFsYWxhbGFsYWxhbGFsYWxhbGFsYWwiLCJncmF2aXR5IjoiY2VudGVyIn19fX0=
Is it related to the font?

I have updated the post, and also the code to support more options to tweak your watermark.. Please have a look at the section where you need to add the font config in the source/image-handler/fonts/fonts.conf

Great!
thank you very much.
I redeployed according to your updated guide and successfully achieved the effect of text watermarking.

I would like to ask how to realize the support of image watermarking effect?
^_^

[pedja4]

I can confirm that the overlay works for me with this as the image request:

{
   "bucket":"my-bucket",
   "key":"myImage.png",
   "edits":{
      "overlayWith":{
          "bucket":"my-bucket",
          "key":"logo.png", 
          "wRatio": 100, 
          "hRatio": 100, 
          "options": {
              "left": 0, 
              "top": 20
          }
      }
   }
}

[CumpsD]

Is there any way to apply the overlayWith before a resize?