Create an image watermark using sharp composite transformation in Directus image preset

Hello,

I found this code in a discussion on github from johnny9144- here:

Share a workaround approach to add watermark inspired by the Sharp composite function rijkvanzanten mentioned above, the solution isn’t perfect but works as intended.

Steps

Prepare a watermark-only image PNG file and put it in a space (In my case, I pack it into Directus docker image together) that the Directus server be able to access.

Go to the project settings page and add a new transformation preset with additional transformation as below (remember to replace the file-system-absolute-path-to-watermark-file with yours.)

update: relative path works as well

[
[
“composite”,
[
{
“input”: <file-system-absolute-path-to-watermark-file>,
“tile”: true
}
]
]
]
After applying the project settings(you have to apply project settings after you add a new preset), you can get a new image with watermark via the endpoint /assets//?key= or /assets/?key=.
Hope that helps anyone who finds the discussion. It works so far so good at the moment on Directus 10.6.3.

But try this transformation code, I get an error that the file is missing. But that URL does reach the right watermark file.

{"errors":[{"message":"Input file is missing: \"https://mysite.com/assets/f5b4b673-97dd-4325-b885-44bfcf014c31\"","extensions":{"code":"INTERNAL_SERVER_ERROR"}}]}

Any suggestions on what I can do to make sure the image can be found?

Make sure <file-system-absolute-path-to-watermark-file> is a local file path, sharp will probably not download that for you.