How could i crop an image to circle?

[lanlin]

I want to crop an image to the circle so that I can use it as an avatar, how to do this?

[beomseoklee]

Thanks for contacting us @lanlin
Currently, the solution does not support that, so you might need to implement this one by yourself.

For example, this is a very simple example which only supports square images making circle.

if (key === 'circle') {
    let { width, height } = metadata;
    if (edits.resize) {
        width = edits.resize.width ? edits.resize.width : width;
        height = edits.resize.height ? edits.resize.height : height;
    }

    const rect = Buffer.from(`<svg><rect x="0" y="0" width="${width}" height="${height}" rx="100" ry="100"/></svg>`);
    const params = [{ input: rect, blend: 'dest-in' }];
    image.composite(params);
}

And you can create encoded URL with:

const j = JSON.stringify({
    bucket: 'your-bucket',
    key: 'your-image',
    edits: {
        circle: ''
    }
});
const encoded = Buffer.from(j).toString('base64');

This will provide you something like this.

[lanlin]

@beomseoklee thanks very much. Would you please add this feature in the next release?

[haoujey]

Thanks for contacting us @lanlin
Currently, the solution does not support that, so you might need to implement this one by yourself.

For example, this is a very simple example which only supports square images making circle.

if (key === 'circle') {
    let { width, height } = metadata;
    if (edits.resize) {
        width = edits.resize.width ? edits.resize.width : width;
        height = edits.resize.height ? edits.resize.height : height;
    }

    const rect = Buffer.from(`<svg><rect x="0" y="0" width="${width}" height="${height}" rx="100" ry="100"/></svg>`);
    const params = [{ input: rect, blend: 'dest-in' }];
    image.composite(params);
}

And you can create encoded URL with:

const j = JSON.stringify({
    bucket: 'your-bucket',
    key: 'your-image',
    edits: {
        circle: ''
    }
});
const encoded = Buffer.from(j).toString('base64');

This will provide you something like this.

Where this code should be implemented ?

[beomseoklee]

@haoujey You can implement that part in image-handler.js after smartCrop if statement.

[haoujey]

thanks ! :)

[G-Lenz]

We've added support for circular cropping in v5.2.0.