Image Transformation with Workers - what I'm doing wrong?

I'm trying to apply some blur to an image, but Worker results with the original image instead transformed. What's wrong with my setup?

I'm saving & deploying the app and testing it outside Dashboard Preview.

export default {
  async fetch(request, env, ctx) {

    const url = new URL(request.url)
    const imageUrl = url.searchParams.get("image");

    return fetch(imageUrl, {
      cf: {
        image: {
          blur: 100,
        },
      },
    });
  },
};

export default {
  async fetch(request, env, ctx) {

    const url = new URL(request.url)
    const imageUrl = url.searchParams.get("image");

    return fetch(imageUrl, {
      cf: {
        image: {
          blur: 100,
        },
      },
    });
  },
};

export default {
  async fetch(request, env, ctx) {

    const url = new URL(request.url)
    const imageUrl = url.searchParams.get("image");

    return fetch(imageUrl, {
      cf: {
        image: {
          blur: 100,
        },
      },
    });
  },
};

export default {
  async fetch(request, env, ctx) {

    const url = new URL(request.url)
    const imageUrl = url.searchParams.get("image");

    return fetch(imageUrl, {
      cf: {
        image: {
          blur: 100,
        },
      },
    });
  },
};

Erisa•2/17/24, 7:24 PM

Are image transformations enabled on the zone the worker runs on?

EErisa Are image transformations enabled on the zone the worker runs on?

Gustavo de León•2/18/24, 12:16 AM

Are tranformations disabled in *.pages.dev domains?

im testing transformations via URL
and im my production domain it works, but in my preview domain I get a 404 error.

Should I use transform with workers to make this work?

GGustavo de León Are tranformations disabled in *.pages.dev domains? im testing transformations ...

Erisa•2/18/24, 12:18 AM

They only work on zones you own and have enabled it on domains you have added to Cloudflare. They do not work on workers.devworkers.dev or pages.devpages.dev because you are not able to modify settings and enable them for those.

Erisa•2/18/24, 12:18 AM

This applies to using it in Workers/Functions too, and unfortunately Transformations will not work in Functions either

Gustavo de León•2/18/24, 12:32 AM

ok, that sound a little disappointing to me :/
so.. yes only works in production

I mean, I completely understand,
thanks for the clarification.

Gustavo de León•2/18/24, 12:33 AM

I'm using next.js btw,
made a custom loader for the image component,
do you think it will work (on the preview domains) if I get the image from my domain and not from the pages.dev one?

I mean from this
return "/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}";return "/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}";

to this
return "https://mydomain.com/cdn-cgi/image/${params.join(',')}/${src}"return "https://mydomain.com/cdn-cgi/image/${params.join(',')}/${src}"

Erisa•2/18/24, 12:38 AM

Yes that should work!

Gustavo de León•2/18/24, 12:50 AM

I tested already, but got error 403 Forbidden.

Turning off Hotlink protection solved the issue
so
I ended creating a configuration rule to turn off HL protection only for pages.dev referers

Gustavo de León•2/18/24, 12:52 AM

Thanks

Image Transformation with Workers - what I'm doing wrong?

Similar Threads

Similar Threads

Similar Threads