Martijn Posts - Answer Overflow

Martijn

•Created by Martijn on 5/7/2024 in #pages-help

Image Transformations via Pages Function doesn't seem to work

I'm trying to implement CF Image Transformations through workers (in my case, a Pages Function), but the image does not seem to get transformed. According to the troubleshooting page, the response should contain the Cf-Resized header, but it does not. - The feature is enabled in my cloudflare account - There shouldn't be any other workers running on the same request - The feature is enabled in the correct zone (dashboard > Images > Transformations > <my-domain.com> is enabled, and even "Resize from any origin" is checked even though that shouldn't be needed for workers. - Source image is publicly reachable (it's in my R2 bucket) - Worker is compiling correctly and being hit on the correct route and returning the right image, just not transformed - The pages project is running on v2.my-domain.com which is a custom domain for the production builds of the pages project My worker code is quite simple, a slightly modified version of the docs' example, some checks trimmed away to fit this ticket:

export async function onRequestGet({ request, env }) {
    
    let options = { cf: { image: {} } };

    const imageURL = `${env.S3_PUBLIC_HOST}${url.searchParams.get("image")}`;
    const size = url.searchParams.get("size");

    switch (size) {
        case "small": options.cf.image.width = 400; break;
        case "medium": options.cf.image.width = 600; break;
        default:
            return new Response('Disallowed size', { status: 400 });
    }

    options.cf.image.quality = 80;
    options.cf.image.fit = 'scale-down';
    options.cf.image.metadata = 'copyright';

    const accept = request.headers.get("Accept");
    if (/image\/webp/.test(accept)) {
        options.cf.image.format = 'webp';
    } else {
        options.cf.image.format = 'jpg';
    }

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

    return fetch(imageRequest, options);
}

export async function onRequestGet({ request, env }) {
    
    let options = { cf: { image: {} } };

    const imageURL = `${env.S3_PUBLIC_HOST}${url.searchParams.get("image")}`;
    const size = url.searchParams.get("size");

    switch (size) {
        case "small": options.cf.image.width = 400; break;
        case "medium": options.cf.image.width = 600; break;
        default:
            return new Response('Disallowed size', { status: 400 });
    }

    options.cf.image.quality = 80;
    options.cf.image.fit = 'scale-down';
    options.cf.image.metadata = 'copyright';

    const accept = request.headers.get("Accept");
    if (/image\/webp/.test(accept)) {
        options.cf.image.format = 'webp';
    } else {
        options.cf.image.format = 'jpg';
    }

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

    return fetch(imageRequest, options);
}

15 replies

Gaming

Programming