Utterly perplexed by workers

I am in the process of uploading 100,000+ images to Cloudflare via the API.

I will need to serve images on our website with an overlaid watermark but without affecting the original uploaded image.

I have tried reading the Workers documentation. It is stupidly complex and glosses over the basics. I seem to need to be an expert first to then be a beginner.

I have created a worker in my account… and now have no idea what code I need to put in it or how I serve the images on our website through that worker thing.

Please could someone walk me gently through adding a watermark? Thanks

This worker gets you halfway there:

https://developers.cloudflare.com/images/image-resizing/resize-with-workers/#an-example-worker

Then edit Line 14 to add the Overlay, so it looks like this (with your overlay image URL, instead of my example.com URL):

let options = { cf: { image: {draw:[{url: 'https://example.com/overlay/picture.png',bottom: 5,right: 5,fit: 'contain',width: 100,height: 50,opacity: 0.8},]}} }

You’ll need to add a Route for that Worker, like example.com/image-resizing*, then use Image URLs like:

https://example.com/image-resizing?width=800&image=https://example.com/images/picture.jpg

Workers is really a Developer platform, designed for Developers who want to perform complex tasks. Its documentation is not a How-To-Code class. It takes a while to get the hang of it. You can get more coding assistance if you ask clear questions on the Discord server:

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.