使用canvas.loadImage()通过URL加载图片无响应问题求助

你代码里的核心问题是在then回调中错误地将Promise对象传给了drawImage。loadImage返回的是一个Promise，当它成功resolve时，会把加载完成的Image实例作为参数传入回调函数，你需要用这个实例来调用drawImage，而不是直接用Promise对象logo。

修正后的代码 #

const { createCanvas, loadImage } = require('canvas'); // 确保正确导入

const width = 1200
const height = 600

const canvas = createCanvas(width, height);
const context = canvas.getContext('2d');

context.fillStyle = '#000'
context.fillRect(0, 0, width, height)

context.font = 'bold 70pt Menlo'
context.textAlign = 'center'
context.textBaseline = 'top'
context.fillStyle = '#3574d4'

const text = 'Aj Diaz RE'

const textWidth = context.measureText(text).width
context.fillRect(600 - textWidth / 2 - 10, 170 - 5, textWidth + 20, 120)
context.fillStyle = '#fff'
context.fillText(text, 600, 170)

context.fillStyle = '#fff'
context.font = 'bold 30pt Menlo'
context.fillText('johnrwood.com', 600, 530)

const logoPromise = loadImage('https://mystickermania.com/cdn/stickers/noob-pack/fallout-vault-boy-512x512.png');
logoPromise.then((img) => { // 接收加载完成的Image实例
    context.drawImage(img, 340, 515, 70, 70) // 使用img实例绘制
    console.log("canvas.toDataURL('image/png')");
    console.log(canvas.toDataURL('image/png'));
}).catch(err => {
    console.error('加载图片失败:', err) // 用error输出更清晰
})

其他排查点 #

1. 确认依赖导入正确：确保你已经从canvas包中正确导入loadImage，如果是前端环境，要确认canvas API是否可用。
2. 检查图片URL有效性：确认目标图片URL可以正常访问，没有404或权限限制问题。
3. 查看catch的错误信息：如果修正后还是没反应，检查控制台的错误输出，catch里的日志会告诉你具体失败原因。

内容的提问来源于stack exchange，提问作者DetectiveFalcon