Cloudflare Developers•15mo ago

R2 bound worker + service worker with image resizing does not work

Hello guys! I'm new in the cloudflare space but love learning the systems. I have an R2 storage which I have to keep private. On top of that I have a worker that is bound to it and serves images stored in a bucket. I have a second worker that is "service" bound to the R2 bound worker that I intend to have to serve optimized versions of the images. See the service bound worker script in the comments. I can succesfully fetch an image from the .dev endpoint, but the image does not get resized with the width and height parameters. What am I doing wrong?

3 Replies

HueInDaHaus•15mo ago

Worker script:

export interface Env {
    SERVE: Fetcher,
    WORKER_API_KEY: string | undefined
}

function auth(request: Request, env: Env) {
    return request.headers.get("X-Api-Key") === env.WORKER_API_KEY
}

export default {
    async fetch(request: Request, env: Env, ctx: ExecutionContext) {
        
        if (!auth(request, env)){
            return new Response('Unauthorized', {
                status: 401
            })
        }
        

        let url = new URL(request.url)

        // Cloudflare-specific options are in the cf object.
        let options = { cf: { image: {} } }

        // Copy parameters from query string to request options.
        // You can implement various different parameters here.
        if (url.searchParams.has("width")) options.cf.image["width"] = parseInt(url.searchParams.get("width"))
        if (url.searchParams.has("height")) options.cf.image["height"] = parseInt(url.searchParams.get("height"))
        if (url.searchParams.has("quality")) options.cf.image["quality"] = parseInt(url.searchParams.get("quality"))

        // Your Worker is responsible for automatic format negotiation. Check the Accept header.
        const accept = request.headers.get("Accept");
        if (/image\/avif/.test(accept)) {
            options.cf.image["format"] = 'avif';
        } else if (/image\/webp/.test(accept)) {
            options.cf.image["format"] = 'webp';
        }

        // Optionally, only allow URLs with JPEG, PNG, GIF, or WebP file extensions
        // @see https://developers.cloudflare.com/images/url-format#supported-formats-and-limitations
        if (!/\.(jpe?g|png|webp)$/i.test(url.pathname)) {
            return new Response('Disallowed file extension', { status: 400 })
        }

        return await env.SERVE.fetch(request, options)
    },
};

export interface Env {
    SERVE: Fetcher,
    WORKER_API_KEY: string | undefined
}

function auth(request: Request, env: Env) {
    return request.headers.get("X-Api-Key") === env.WORKER_API_KEY
}

export default {
    async fetch(request: Request, env: Env, ctx: ExecutionContext) {
        
        if (!auth(request, env)){
            return new Response('Unauthorized', {
                status: 401
            })
        }
        

        let url = new URL(request.url)

        // Cloudflare-specific options are in the cf object.
        let options = { cf: { image: {} } }

        // Copy parameters from query string to request options.
        // You can implement various different parameters here.
        if (url.searchParams.has("width")) options.cf.image["width"] = parseInt(url.searchParams.get("width"))
        if (url.searchParams.has("height")) options.cf.image["height"] = parseInt(url.searchParams.get("height"))
        if (url.searchParams.has("quality")) options.cf.image["quality"] = parseInt(url.searchParams.get("quality"))

        // Your Worker is responsible for automatic format negotiation. Check the Accept header.
        const accept = request.headers.get("Accept");
        if (/image\/avif/.test(accept)) {
            options.cf.image["format"] = 'avif';
        } else if (/image\/webp/.test(accept)) {
            options.cf.image["format"] = 'webp';
        }

        // Optionally, only allow URLs with JPEG, PNG, GIF, or WebP file extensions
        // @see https://developers.cloudflare.com/images/url-format#supported-formats-and-limitations
        if (!/\.(jpe?g|png|webp)$/i.test(url.pathname)) {
            return new Response('Disallowed file extension', { status: 400 })
        }

        return await env.SERVE.fetch(request, options)
    },
};

And yes I have a pro plan and activated the image optimization functionality

HueInDaHaus•15mo ago

Ok maybe I've figured out something. According to https://developers.cloudflare.com/images/image-resizing/troubleshooting/ it says "There is another Worker running on the same request. Resizing is “forgotten” as soon as one Worker calls another. Do not use Workers scoped to the entire domain /*." Does that mean that any fetch via service binding workers will prompt the resizing to be "forgotten" or whatever it means? Can someone clarify? When i set the R2 bound worker to a public route and call it not using env.SERVER.fetch but instead only fetch it seems to work.

Troubleshooting | Image Resizing · Cloudflare Image Optimization docs

Does the response have a Cf-Resized header? If not, then resizing has not been attempted. Possible causes:

peachneo•14mo ago

Curious if you got resolution on this? Looking to do something similar

Gaming

Programming

R2 bound worker + service worker with image resizing does not work