Cloudflare image transformations from R2 bucket

Developers Storage
1

For Workers & Pages, what is the name of the domain?

tdt-api.cesparzadev.workers.dev

What is the issue or error you’re encountering

Can’t transform images from R2 Bucket

What steps have you taken to resolve the issue?

I have a cloudflare worker with a Hono app, I have and R2 bucket and a D1 database in the bindings. I am trying to use transformations for images stored in the R2 bucket, but I am not sure if this is possible without a custom domain. I am generating a signed URL to access the image on the R2 bucket which works well. My question is how can I enable transformations for my R2 bucket I am trying to use this endpoint on my Hono app

app.get(‘api/images’, async (c) => {
let options = { cf: { image: {} } };
const fit = c.req.query(‘fit’);
const width = c.req.query(‘width’);
const height = c.req.query(‘height’);
const quality = c.req.query(‘quality’);

if (fit) options.cf.image.fit = fit;
if (width) options.cf.image.width = width;
if (height) options.cf.image.height = height;
if (quality) options.cf.image.quality = quality;

const accept = c.req.header('Accept');
if (/image\/avif/.test(accept)) {
	options.cf.image.format = 'avif';
} else if (/image\/webp/.test(accept)) {
	options.cf.image.format = 'webp';
}

const imageUrl = c.req.query('image');
if (!imageUrl) return c.json({ error: "Missing 'image' url" }, 400);

try {
	const { hostname, pathname } = new URL(imageUrl);
	if (!/\.(jpe?g|png|gif|webp)$/i.test(pathname)) {
		return c.json({ error: 'File extension not supported' }, 400);
	}
	if (!hostname.startsWith('tdt-bucket-dev') || !hostname.endsWith('cloudflarestorage.com')) {
		return c.json({ error: 'Invalid file source' }, 403);
	}
} catch (error) {
	console.error('Invalid file', error);
	return c.json({ error: 'Invalid file' }, 400);
}
const imageRequest = new Request(imageUrl, { headers: c.req.header() });
return fetch(imageRequest, options);

});

I tried this on the development mode with the local mode turned off, do I need to deploy the worker?

When I send a get request to

http://localhost:8787/api/images?fit=contain&&width=60&&height=60&&image=<the_signed_url>

I get this response

<?xml version="1.0" encoding="UTF-8"?> InvalidArgument Authorization

I am a little bit lost here, I haven’t been able to find any resources on how to enable transformations without having a custom domain.