Nauman
CDCloudflare Developers
•Created by Nauman on 4/8/2025 in #workers-help
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?
2 replies