Cant get worker to overlay image hosted on cloudflare
I am trying to overlay / watermark images while being served on my website.
I have written following worker code
export default {
async fetch(request) {
const imageRequest = new URL(request.url);
const imageId = imageRequest.searchParams.get("image");
if (!imageId) {
return new Response("Missing 'image' query parameter", { status: 400 });
}
const imageUrl =
return new Response(response.body, { status: response.status, headers: headers }); } }; and then i try to access image using workers url https://image-overlay.mkamal.workers.dev/?image=[any_image_id] but only base image is displayed without any overlay / watermark. 1. Both base image and image used to watermark are hosted on cloudflare 2. I have enabled "Transformation" under images in cloudflare dashboard. 3. I am on cloudflare pro plan. 4. I am subscribed to images stream bundle basic. Please help me to understand why image is not being watermarked?
https://imagedelivery.net/${account_Id}/${imageId}/large;
console.log(Processing image from: ${imageUrl});
// Fetch the image and apply watermark
const response = await fetch(imageUrl, {
cf: {
image: {
quality: 100, // Ensure high quality for watermark
draw: [
{
url: "${watermark_image_url}", // Watermark image URL
bottom: 10,
right: 10,
width: 100
}
]
}
}
});
console.log('Response Status:', response.status);
if (!response.ok) {
console.log("Error fetching or processing image.");
return new Response("Error processing image", { status: response.status });
}
// Add CSP header to allow external resources
const headers = new Headers(response.headers);
headers.set('Content-Security-Policy', "default-src 'self'; img-src 'self' https://imagedelivery.net; script-src 'self'; style-src 'self' 'unsafe-inline';");
return new Response(response.body, { status: response.status, headers: headers }); } }; and then i try to access image using workers url https://image-overlay.mkamal.workers.dev/?image=[any_image_id] but only base image is displayed without any overlay / watermark. 1. Both base image and image used to watermark are hosted on cloudflare 2. I have enabled "Transformation" under images in cloudflare dashboard. 3. I am on cloudflare pro plan. 4. I am subscribed to images stream bundle basic. Please help me to understand why image is not being watermarked?
1 Reply
the Images team is scoping out ways to natively support watermarking for hosted images. in the meantime, you'd need to use the Images binding to apply the watermark then forward the output: https://developers.cloudflare.com/images/transform-images/bindings/
Cloudflare Docs
Bind to Workers API · Cloudflare Images docs
A binding connects your Worker to external resources on the Developer Platform, like Images, R2 buckets, or KV Namespaces.