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

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

[![enter image description here][1]][1] 


  [1]: https://i.stack.imgur.com/DZqBd.png

我试过了：

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

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() 合成。

enter image description here

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

2 个答案: