Jimp: Circular image?

Created on 12 Nov 2015 · 6Comments · Source: oliver-moran/jimp

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.

Source

haydenbleasel

Most helpful comment

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!

lenna
mask
lenna-circle

oliver-moran on 14 Nov 2015

👍7 ❤1

All 6 comments

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!

lenna
mask
lenna-circle

oliver-moran on 14 Nov 2015

👍7 ❤1

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.

haydenbleasel on 14 Nov 2015

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

oliver-moran on 14 Nov 2015

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 :)

haydenbleasel on 14 Nov 2015

@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?

spsiddarthan on 5 Oct 2017

@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
b7fc031739