Cloudflare Developers•2mo ago

Can't get CF transform via workers to do anything

Following this guide: https://developers.cloudflare.com/images/transform-images/transform-via-workers/#an-example-worker Using an unbelievably basic worker:

addEventListener('fetch', (event) => {
    event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
    const url = new URL(request.url);
    const { pathname } = url;
    const imageURL = 'https://pub-d6b4cd812c4c423984abcb97395046d5.r2.dev' + pathname;

    const options = {
        cf: {
            image: {
                width: '100',
                height: '100',
                fit: 'cover',
            },
        },
    };

    const imageRequest = new Request(imageURL, { headers: request.headers });
    return fetch(imageRequest, options);
}

addEventListener('fetch', (event) => {
    event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
    const url = new URL(request.url);
    const { pathname } = url;
    const imageURL = 'https://pub-d6b4cd812c4c423984abcb97395046d5.r2.dev' + pathname;

    const options = {
        cf: {
            image: {
                width: '100',
                height: '100',
                fit: 'cover',
            },
        },
    };

    const imageRequest = new Request(imageURL, { headers: request.headers });
    return fetch(imageRequest, options);
}

This doesn't seem to do anything, it just sends the full size image through. What am I doing wrong?

Cloudflare Docs

Transform via Workers · Cloudflare Image Optimization docs

Using Cloudflare Workers to transform with a custom URL scheme gives you powerful programmatic control over every image request.

8 Replies

Chaika•2mo ago

Do you have Image Resizing Enabled for the zone the worker is executing on under Image -> Transformations? If it's on workers.dev it'll never work. Also r2.dev urls aren't for production as they are rate-limited, Custom Domains are what you should use

ianh•2mo ago

I have it enabled for all zones Sounds like the workers domain is the problem

Chaika•2mo ago

are you running it on the workers.dev?

ianh•2mo ago

yeah i cant figure out how to bind a domain to a worker theres nothing in the worker settins and nothing in the main workers config where are domains configured? Surprised its this hard to find oh its under triggers? I find it odd and confusing the CF image behaviors dont work on the workers.dev domain that seems like an easy solution WOO using custom zone worked It would be helpful to mention that you have to use custom zone in the docs

Chaika•2mo ago

just because you can't allow it under the Image -> Transformations tab You can add a Worker Custom Domain and it'll take care of the DNS, or routes and add a dns record yourself/add it over an existing origin (or on a specific path, etc) Settings -> Triggers yea

ianh•2mo ago

a typescript example would be super helpful the typing on this worker is a nightmare

ianh•2mo ago

ianh•2mo ago

the typing is all over the place in the CF lib cool this is working great now, thanks for the info

Gaming

Programming

Can't get CF transform via workers to do anything