Cloudflare Developers•4mo ago

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,
        },
      },
    });
  },
};

6 Replies

Erisa•4mo ago

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

Gustavo de León•4mo ago

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?

Erisa•4mo ago

They only work on zones you own and have enabled it on domains you have added to Cloudflare. They do not work on workers.dev or pages.dev because you are not able to modify settings and enable them for those. This applies to using it in Workers/Functions too, and unfortunately Transformations will not work in Functions either

Gustavo de León•4mo ago

ok, that sound a little disappointing to me :/ so.. yes only works in production I mean, I completely understand, thanks for the clarification. 🙂 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)}"; to this return "https://mydomain.com/cdn-cgi/image/${params.join(',')}/${src}"

Erisa•4mo ago

Yes that should work!

Gustavo de León•4mo ago

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 Thanks 🙂

Gaming

Programming

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