将多张图片添加到 canvas

Question

我正在尝试创建一个 "banner"，上面有信息，包括图像。

横幅看起来像这样：

图像将放在圆圈上，然后文本将放在其他区域。

我的尝试失败了，因为创建了一个空图像。

const { createCanvas, loadImage } = require('canvas');

    const canvas = createCanvas(901, 231)
    const ctx = canvas.getContext('2d');
    const ctxAvatar = canvas.getContext('2d');
    const ctxSkin = canvas.getContext('2d');
    loadImage('assets/images/avatar.png').then(avatar => {
        ctxAvatar.drawImage(avatar, 50, 0, 70, 70);
        loadImage('assets/images/banner.png').then(banner => {
            ctx.drawImage(avatar, 50, 0, 70, 70);
            ctx.drawImage(banner, 50, 0, 70, 70);
        });
    });
    const output = canvas.toBuffer();

我做错了什么？

Answer 1

这应该有效：

const canvas = createCanvas(901, 231)
const ctx = canvas.getContext('2d');
const ctxAvatar = canvas.getContext('2d');
const ctxSkin = canvas.getContext('2d');
loadImage('assets/images/avatar.png').then(avatar => {
    ctxAvatar.drawImage(avatar, 50, 0, 70, 70);
    loadImage('assets/images/banner.png').then(banner => {
        ctx.drawImage(banner, 50, 0, 70, 70);
        const output = canvas.toBuffer();
    });
});

const output = canvas.toBuffer();应该在里面

将多张图片添加到 canvas

Adding multiple images into a canvas

canvas

node.js

node-canvas