.drawImage 函数为画布抛出“TypeError: Image or Canvas

问题描述

我正在尝试在我的不和谐机器人中添加排名卡，为此我正在尝试使用画布但是当我使用画布时一切正常，直到我点击 .drawImage 方法.它给了我一个错误，说TypeError:Image or Canvas expected".尽管我已经在全局范围内需要 canvas，但与 canvas 相关的所有其他内容也都可以正常工作.

I am trying to add a rank card in my discord bot, and in order to do so I am trying to use canvas but when I use canvas everything works fine until I hit the .drawImage method. Where it gives me an error saying "TypeError: Image or Canvas expected". Although I've already required canvas globally, and everything else that has to do with canvas works properly aswell.

我尝试在函数内部 require('canvas') 但这也不能解决问题.

I've tried to require('canvas') inside the function but that doesn't fix the problem either.

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
const background = Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'welcome-image.png');
msg.channel.send(`Testing...`, attachment);

当它发送消息时，它应该附上图片，但现在它只是给我以下错误.

When it sends the message it should attach the image with it, but right now its just giving me the following error.

错误:

C:UsersDesktopDiscordiBotibot.js:25
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
        ^

TypeError: Image or Canvas expected

推荐答案

node-canvas' loadImage() 方法返回一个 Promise，它被解析为一个 <Image>.

你不能直接传递这个 Promise，你必须等待:

You can't pass this Promise directly, you'll have to await for it:

const canvas = Canvas.createCanvas(934, 282);
const ctx = canvas.getContext('2d');
// we need to await the Promise gets resolved since loading of Image is async
const background = await Canvas.loadImage('./images/Rank_Card.jpg');

ctx.drawImage(background, 0, 0, canvas.width, canvas.height);  
const attachment = new Discord.Attachment(canvas.toBuffer(), 'welcome-image.png');
msg.channel.send(`Testing...`, attachment);

这篇关于.drawImage 函数为画布抛出“TypeError: Image or Canvas expected"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！