使用 Jimp 将图像放在另一个图像上

Question

我想编辑我的图片在我的Node.js应用程序在服务器端运行。此时，我已经成功地在我的图像上添加了文本。我想在此图像的左上角放置一个绿色矩形，并尝试了以下方法：

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

这是有效的，但它正在删除我的图像边界下的部分。

我试过：

• 仅使用.png文件
• 为我的图像添加不透明度
• 仅使用具有 alpha 通道的图像

Answer 1

要使其工作，您必须使用：

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

来自jimp doc

因为image.blit()只是删除图像下的所有内容。

Answer 2

将一个图像合并到另一个图像上：

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

两个图像通过 jimp.blit() 进行复合。

在此输入图像描述