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 =
console.log(
// 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.
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 =
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.
- Both base image and image used to watermark are hosted on cloudflare
- I have enabled "Transformation" under images in cloudflare dashboard.
- I am on cloudflare pro plan.
- I am subscribed to images stream bundle basic.
