Cloudflare Developers•3w ago

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}`;

// 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

1 Reply

SimonOP•3w ago

Okay it's my bad, I forgot to enable the remote binding in wrangler

Gaming

Programming

Am I missing something with Images

Did you find this page helpful?