How do I avoid breaking the image resizer when running a Worker?

I have URLs I want to use a worker on but it breaks the image resizer which I do not want to modify.

I can detect the page(s) I want to address, but how do I return from the worker and allow the image resizer to process the URL ?
If I just return or return true, it skips processing the resizer.

I have a page rule like this: *www.example.com/*.html which would work if the Worker route would accept the same match patterns as Page Rules, but it will only accept wildcards at the beginning and end.

So I need to either :

  1. have a wildcard in the middle of the Worker route pattern (ideal), or
  2. get the Worker return back in a way that would allow the regular process to continue as though the Worker never intercepted the call, and let the resizer do its job.

Just to be more clear, this is the starter code when you create a new Worker, this will break the image resizer…

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

/**
 * Fetch and log a request
 * @param {Request} request
 */
async function handleRequest(request) {
  console.log('Got request', request)
  const response = await fetch(request)
  console.log('Got response', response)
  return response
}

Hey @scott5, when you say “image resizer”, do you mean Cloudflare’s image resizer product?

Assuming that you’re using the default URL format for the image resizer (docs here), you should still be able to proxy requests through a Workers script and basically do a pass-through:

async function handleRequest(request) {
  let response
  if (request.url.includes("/cdn-cgi/image/")) {
    // _should_ proxy to image resizer correctly
    response = await fetch(request)
  } else {
    // Make a new, non-image resizer request
  } 
  
  return response
}

Thank you for your response.

Yes I did try to just return when no processing was required however the Worker seems to return in such a way that is not compatible to the image resizer.

The returned image is just the original size image, so it works in that the request is still handled by the resizer (because that URL is not on my server obviously) but the parameters seem to be lost.

I tried your code:

async function handleRequest(request) {
  let response
  if (request.url.includes("/cdn-cgi/image/")) {
    response = await fetch(request)
  } else {
    response = await fetch(request)
  } 

  return response
}

which should do nothing, and indeed the site looks fine but the images are all large.

I only want the Worker to process files ending in ‘.html’ but the Route setting will only allow a wildcard at the beginning and end but not in the middle like a Page Rule.

Fixing the Worker to work with the resizer is not as good a solution as only calling the Worker when it is needed with a wildcard in the middle of the Route name.

  • Scott

interesting, @scott5! I’ll ask the team and see if this is a known issue. thanks!

1 Like