Circular image?

[haydenbleasel]

Hello,

I'm wondering whether it's possible to create a circular image in JIMP i.e. creating a 200x200 transparent canvas and create a circle on top of it with a radius of 200px. The aim is to create Firefox OS favicons e.g.

[oliver-moran]

This is very easy using masks:

var p1 = Jimp.read("lenna.png");
var p2 = Jimp.read("mask.png");

Promise.all([p1, p2]).then(function(images){
    var lenna = images[0];
    var mask = images[1];
    lenna.mask(mask, 0, 0).write("lenna-circle.png");
});

And this is exactly the purpose I wrote Jimp for BTW. Best of luck!

---

[haydenbleasel]

Yep that was my fallback solution, problem is when you're programmatically generating images of different sizes, scaling a single size mask won't give the best quality, but no matter.

[oliver-moran]

Is it that bad? Try creating just one "high resolution" icon then scaling and saving that:

var p1 = Jimp.read("lenna.png");
var p2 = Jimp.read("mask.png");

Promise.all([p1, p2]).then(function(images){
    var lenna = images[0];
    var mask = images[1];

    lenna.mask(mask, 0, 0).write("lenna-circle.png");

    var sizes = [256, 128, 64, 60, 48, 32, 30, 16];

    for (var i = 0; i < sizes.length; i++) {
        lenna.clone().resize(sizes[i], Jimp.AUTO)
        .write("lenna-circle" + i + ".png");
    }
});

[haydenbleasel]

It'll definitely work, just saying it won't be absolutely pixel-perfect, but I guess then again neither will the resized image so it's all good :)

[spsiddarthan]

@oliver-moran, @haydenbleasel : I was trying to do the exact same thing today. I just wanted to know if I understood the concept of mask correctly.

If I have an image with dimensions x*x and want to create the circular crop for it, I first have to generate the mask image on the fly. Is that correct?

[devdemi]

@oliver-moran is there possibility to make transparent corners? I want to generate circular avatar and composite it with another image but that image has not white background