Cloudflare Developers•12mo ago

can i do something i will 2 copies of

can i do something i will 2 copies of image https://pbs.twimg.com/media/GJgAFS0WgAAxuy6?format=jpg&name=small so i will serve directly from r2 using my custom cdn and size wil be in query params like twitter does?

4 Replies

Deanna•12mo ago

You can use Images to transform images that are stored in R2: https://developers.cloudflare.com/images/transform-images/transform-via-url/

Cloudflare Docs

Transform via URL · Cloudflare Image Optimization docs

You can convert and resize images by requesting them via a specially-formatted URL. This way you do not need to write any code, only change HTML …

NitishOP•12mo ago

I have images in r2 can we use those images?

Alcyone•4mo ago

How? Are there any limitations? I need to transform images that are stored on R2 (EU jurisdiction). I have a worker getting the image, but I have no idea how to return the transformed image. I need resizing and a watermark.

AGill•2mo ago

Hey did you guys figure this out? I'm also trying to serve images from my R2 bucket but I want to resize them on demand. My app is using NuxtJS and I have a dedicated API endpoint in my app to serve the R2 image. the return response the endpoint is the object.body of the R2 object which is type ReadableStream

export default eventHandler(async (event) => {
  const { pathname: normalizedPathname } = event.context.params || {};

  const pathname = denormalizePath(normalizedPathname);

  await authorizeR2ObjectRequest(event, pathname);

  const object = await assertObject(event, pathname);

  const contentType
    = object.httpMetadata?.contentType || getContentType(pathname);

  setHeader(event, 'Content-Type', contentType);
  setHeader(event, 'Content-Length', object.size);
  setHeader(event, 'etag', object.httpEtag);
  setHeader(event, 'Content-Security-Policy', 'default-src \'none\';');

  return object.body;
});

export default eventHandler(async (event) => {
  const { pathname: normalizedPathname } = event.context.params || {};

  const pathname = denormalizePath(normalizedPathname);

  await authorizeR2ObjectRequest(event, pathname);

  const object = await assertObject(event, pathname);

  const contentType
    = object.httpMetadata?.contentType || getContentType(pathname);

  setHeader(event, 'Content-Type', contentType);
  setHeader(event, 'Content-Length', object.size);
  setHeader(event, 'etag', object.httpEtag);
  setHeader(event, 'Content-Security-Policy', 'default-src \'none\';');

  return object.body;
});

^ endpoint is /images/[pathname].ts where [pathname] is the R2 prefix + filename

Gaming

Programming

can i do something i will 2 copies of

Did you find this page helpful?