node.js - 将多个图像添加到画布中

Question

我正在尝试创建一个包含图像在内的信息的“横幅”。

横幅如下所示：

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

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

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();应该在里面