'Place image over an other image using Jimp

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.

image for seeing

I tried:

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


Solution 1:[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.

Solution 2:[2]

To combine a image on another image :

var Jimp = require('jimp');
Jimp.read('imageone.png', (err, fir_img) => {
        if(err) {
            console.log(err);
        } else {
            Jimp.read('imagetwo.png', (err, sec_img) => {
                if(err) {
                    console.log(err);
                } else {
                    fir_img.resize(600, 450);
                    fir_img.blit(sec_img, 0, 360);
                    fir_img.write('new_imgae.png');
                }
            })
        }
    });

Two images are complexed by jimp.blit().

enter image description here

Solution 3:[3]

const { Jimp } = require9'jimp');
const textToImage = require('text-to-image');
let createdImage = textToImage.generate('text_Which_appear_on_image', {
            bgColor: #ffffff00,    
            textColor: red,
            fontSize: 20,
            fontFamily: 'sans-serif',
            lineHeight: 50,
            customHeight: 200,
            maxWidth: 350,
            textAlign: 'center',
            verticalAlign: 'center',
            margin: 20
        });
let jimpImage = Jimp.read(createdImage);
//now let say you have other image named baseImage
//so read them also
let baseImage = Jimp.read(baseImage);

//now composite them

const compositeImage = Jimp.composite(jimpImage, horizontal-alignment,
                                 vertical-alignment,
                                 Jimp.BLEND_SOURCE_OVER);

const finalImage = await compositeImage.getBufferAsync('image/png');
return finalImage;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2
Solution 3 Arvind Kumar

Related Questions