Watermarks
Draw a watermark from KV on an image from R2
interface Env { BUCKET: R2Bucket, NAMESPACE: KVNamespace, IMAGES: ImagesBinding,}export default { async fetch(request, env, ctx): Promise<Response> { const watermarkKey = "my-watermark"; const sourceKey = "my-source-image";
const cache = await caches.open("transformed-images"); const cacheKey = new URL(sourceKey + "/" + watermarkKey, request.url); const cacheResponse = await cache.match(cacheKey);
if (cacheResponse) { return cacheResponse; }
let watermark = await env.NAMESPACE.get(watermarkKey, "stream"); let source = await env.BUCKET.get(sourceKey);
if (!watermark || !source) { return new Response("Not found", { status: 404 }); }
const result = await env.IMAGES.input(source.body) .draw(watermark) .output({ format: "image/jpeg" });
const response = result.response();
ctx.waitUntil(cache.put(cacheKey, response.clone()));
return result.response(); },} satisfies ExportedHandler<Env>;
Was this helpful?
- Resources
- API
- New to Cloudflare?
- Products
- Sponsorships
- Open Source
- Support
- Help Center
- System Status
- Compliance
- GDPR
- Company
- cloudflare.com
- Our team
- Careers
- 2025 Cloudflare, Inc.
- Privacy Policy
- Terms of Use
- Report Security Issues
- Trademark