Replace transparency with a colour

[nickgrealy]

Hi,

I'm currently converting PNG (&/BMP/GIF) to JPG. When I convert images, any transparency (alpha channels) turn BLACK. I would like to change this to WHITE.

Is there a way to do this out of the box?

1. Apply image on top of a white background

Jimp.read(file).then(function(image) {
    var width = image.bitmap.width;
    var height = image.bitmap.height;
    var white = 0xFFFFFFFF;
    // create a white background...
    new Jimp(width, height, white, function(err, backgroundImage) {
        if (err) {
            return handleError(err);
        }
        // apply image on top of white background...
        backgroundImage.blit(image, 0, 0)
            .getBuffer(Jimp.MIME_JPEG, function(err2, buffer) {
                // do stuff with image
            });
    });
});

2. Manually alter each pixel

Jimp.read(file).then(function(image) {
    image.scan(0, 0, image.bitmap.width, image.bitmap.height, function(x, y, idx) {
        var alphaModifier = 1 - (this.bitmap.data[idx + 3] / 255);
        var red = (255 - this.bitmap.data[idx + 0]) * alphaModifier;
        var green = (255 - this.bitmap.data[idx + 1]) * alphaModifier;
        var blue = (255 - this.bitmap.data[idx + 2]) * alphaModifier;
        this.bitmap.data[idx + 0] += red;
        this.bitmap.data[idx + 1] += green;
        this.bitmap.data[idx + 2] += blue;
        this.bitmap.data[idx + 3] = 255; // set no transparency
    });
    // do stuff with image...
});

Sample Source Images
SourceImages.zip

[MCTaylor17]

Would be nice to be able to declare the background color as an option.

[Ojas-Gulati]

You can set a "default color" in Jimp. Let me look into that...

EDIT: try this:
image.background(0xFFFFFFFF);
and then convert the image.

I don't have my normal computer, so can't test :(

[Ojas-Gulati]

Any news on this?

[iamjoyce]

Hi @Ojas-Gulati, Yes that works.

The full code snippet is as follows. Note that I added rgba(false).

// var inputBuffer = (Blob or read image from file)
Jimp.read(inputBuffer, function (err, image) {
    if (err) throw err;
        image
            .rgba(false)
            .background(0xFFFFFFFF)
            .getBuffer(Jimp.MIME_PNG, function (err, outputBuffer) {
                // the image output here will have white background
            });
});

[nickgrealy]

Closing issue, thanks all.

[andre-brdoch]

Hi @Ojas-Gulati, Yes that works.

The full code snippet is as follows. Note that I added rgba(false).

// var inputBuffer = (Blob or read image from file)
Jimp.read(inputBuffer, function (err, image) {
    if (err) throw err;
        image
            .rgba(false)
            .background(0xFFFFFFFF)
            .getBuffer(Jimp.MIME_PNG, function (err, outputBuffer) {
                // the image output here will have white background
            });
});

Hi, I tried this method to convert a png with transparent background to a jpeg with white background:

const inputBuffer = await fs.readFile(this.imagePath);
const image = await jimp.read(inputBuffer);
// jimp will turn a transparent background to black if not changed
await image.rgba(false);
await image.background(0xffffff);
const outputBuffer = await image.getBufferAsync(jimp.MIME_JPEG);
this.imagePath = 'my-jpg.jpg';
await fs.writeFile(this.imagePath, outputBuffer);

However, it turns the background into cyan.
Input image:

Output image:

[hipstersmoothie]

@andrekisi maybe https://www.npmjs.com/package/replace-color can solve your problem

[itslenny]

You can achieve this with compositing...

const width = 300;
const height = 300;
const image = // a jimp image with transparent background
const outputPath = 'where/to/save/it';

new Jimp(width, height, '#FFFFFF', (err, bgImage) => {
    bgImage.composite(image, 0, 0)
        .write(outputFilePath,
            (err) => {
                console.log('file created!!');
            });
});

[enzocaminos]

You can set a "default color" in Jimp. Let me look into that...

EDIT: try this:
image.background(0xFFFFFFFF);
and then convert the image.

I don't have my normal computer, so can't test :(

Thanks for this <3