从URL在画布上绘制不和谐的头像图像(Node.js)

ghg1uchk 于 2023-05-17 发布在 Node.js

关注(0)|答案(4)|浏览(132)

我正在尝试将discord用户的头像图像绘制到node.js画布上。根据文档，我应该可以像这样将url作为src：

var img = new Canvas.Image;
img.onload = () => context.drawImage(img, x, y, w, h);
img.onerror = err => console.log(err);
img.src = url;

这根本不管用因此，根据其他来源，我必须自己用http客户端获取图像。使用Axios我得到：

function requestImageFromURL(url, callback){
    Axios.get(url)
    .then(response => {
        callback(response.data);
    })
    .catch(err => {})
    .finally(() => {});
}

function drawImageFromURL(url, x, y, width, height){
    requestImageFromURL(url, function(buffer){
        var img = new Canvas.Image;
        img.onload = () => context.drawImage(img, x, y, width, height);
        img.onerror = err => console.log(err);
        img.src = buffer;
    });
}

但这会抛出一些非常奇怪的错误，如Error: EINVAL, Invalid argument '�PNG → '。所以我得到了一些数据，但是canvas处理得不太对？还是需要对我收到的数据进行更多的预处理？

node.js

来源：https://stackoverflow.com/questions/63217230/draw-discord-avatar-image-on-canvas-from-url-node-js

4条答案

按热度按时间

cwdobuhd1#

调用类构造函数应该以（）结束。但是在这段代码中没有（），只有Canvas.Image。尝试使用（）的第一个代码，它应该可以工作。

赞(0）回复(0）举报 2023-05-17

q1qsirdb2#

Canvas.Image是一个构造函数。因此，您必须使用（），以便可以操作它。
应该是这样的

function drawImageFromURL(url, x, y, width, height){
    requestImageFromURL(url, function(buffer){
        var img = new Canvas.Image()
        img.onload = () => context.drawImage(img, x, y, width, height);
        img.onerror = err => console.log(err);
        img.src = buffer;
    });
}

赞(0）回复(0）举报 2023-05-17

kknvjkwl3#

第一步：创建背景图像，在那里你的头像将被绘制。
这是我的代码的一部分，当成员加入服务器时发送消息，所以不要介意member参数。
photo.png代表我的背景图像。

const avatar = await Canvas.loadImage(member.user.displayAvatarURL({ format: 'jpg' }));
        context.drawImage(avatar, 40, 13, 120, 120);
        const attachment = new MessageAttachment(canvas.toBuffer(), 'photo.png');
        channel.send(`Welcome, ${member}!`, attachment);

赞(0）回复(0）举报 2023-05-17

omqzjyyz4#

首先，你用displayAvatarURL（）方法得到不和谐的用户头像，然后用loadImage（）方法将图像加载到画布中，然后用ctx.drawImage（）方法使用新的js特性将图像绘制到画布中：

const img = message.author.displayAvatarURL({ extension: 'png' });
const image = Canvas.loadImage(img);
ctx.drawImage(image, 9, 9, 200, 200);

这个解决方案对我很有效

赞(0）回复(0）举报 2023-05-17

我来回答

从URL在画布上绘制不和谐的头像图像(Node.js)

4条答案

相关问题

热门标签

最新问答