将多个图像添加到画布中

Posted 2023-03-14

【中文标题】将多个图像添加到画布中

【英文标题】：Adding multiple images into a canvas

【发布时间】：2019-10-17 12:11:32

【问题描述】：

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

横幅如下所示：

图片会放在圆圈上，然后文字会放在其他区域。

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

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();

我做错了什么？

【问题讨论】：

这有点难测试，你的节点代码是否生成了一个带有canvas元素的html页面？控制台中的图像是否出现 404 错误？我将从分离两个 loadImage 调用开始，以便您可以分别测试它们。此外，ctxAvatar 和 ctxSkin 是相同的。为什么要使用“toBuffer”？

不，这里没有附加网络服务器。我还使用 toBuffer 将图像上传到不和谐客户端（discord.js）

现在的问题是你的问题不完整。您加载和绘制图像似乎没问题，因此在您的过程中出现了其他问题。您必须提供最低限度的工作代码示例，以便其他人可以复制您的问题。

【参考方案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(); 应该在里面