Place image over an other image using Jimp

Question

I'm trying to edit my images on my node.js application working on the server-side. At this moment, I've successfully added text over my image. I would like to place a green rectangle at the top left corner over this image and I tried this method:

    Jimp.read(`borderTop.png`, function (err, top) {
        top.rotate(45);
        Jimp.read(`img.png`, function (err, image) {
            if (err) console.log(err);
            image.blit(top, 430, -250);
            Jimp.loadFont(`${__dirname}/../public/fonts/*.fnt`).then(function (font) {
                image.print(font, 315 - ((16 * 13 ) / 2), 0, "Hello, world!");
                image.write(finalName, (err) => {
                    return cb(null, `img.png`);
                });
            });
        });
    });

This is working but it's removing part of my image that is under the border.

I tried:

• using only .png file
• adding opacity to my images
• using only images that have alpha canal

Answer 1

To make it work you have to use :

image.composite( src, x, y );     // composites another Jimp image over this image at x, y 

from jimp doc

because image.blit() is just deleting everything under your image.