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.
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?
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}/largeconsole.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?
Welcome to the official Cloudflare Developers server. Here you can ask for help and stay updated with the latest news
85,042Members
Resources
Was this page helpful?
