Cloudflare DevelopersCD
Cloudflare Developers3mo ago
1 reply
Simon

Am I missing something with Images

Am I missing something with Images transformations?

I'm trying to transform images to a square & cover fitting.

The resizing works but the fitting is ignored, I tried all options for fit and it always fills with a black background.

The png is the input, the avif is the output.

// inside a worker, Hono + oRPC. input.file = File
const fileBuffer = await input.file.arrayBuffer();

const transformedImage = await context.env.IMAGES.input(
    arrayBufferToReadableStream(fileBuffer),
)
    .transform({
        width: 256,
        height: 256,
        fit: "cover",
    })
    .output(input.output ?? { format: "image/avif" });

const fileName = `${Date.now()}.avif`;

const object = await context.env.BUCKET.put(
    fileName,
    await transformedImage.response().arrayBuffer(),
    {
        httpMetadata: {
            contentType: transformedImage.contentType(),
        },
    },
);

return `${context.env.BUCKET_PUBLIC_URL}/${object.key}`;
screenshot_3756.avif
screenshot_3755.avif
screenshot_3756.png
screenshot_3755.png
Was this page helpful?