如何通过Discord Webhook发送Canvas图片？请求返回400错误

算力阿峰

2026-8-16

Discord Webhook发送Canvas图片的正确方式

Discord Webhook的Embed图片字段不支持canvas.toDataURL()生成的Data URI（Base64格式字符串），这是你收到400错误的核心原因。以下是两种可行的解决方法：

方法一：将Canvas图片作为附件上传（推荐）

通过multipart/form-data格式直接上传图片文件，再在Embed中引用附件，无需额外存储服务：

// 将Canvas转换为Blob对象
canvas.toBlob(function(blob) {
    const formData = new FormData();
    // 添加图片文件，指定文件名
    formData.append("file", blob, "canvas-image.png");
    // 封装Webhook的其他配置参数
    formData.append("payload_json", JSON.stringify({
        content: message,
        username: "AI",
        embeds: [{
            image: {
                // 引用上传的附件，格式为attachment:文件名
                url: "attachment://canvas-image.png"
            }
        }]
    }));

    const xhr = new XMLHttpRequest();
    xhr.open("POST", webHookURL, true);
    // 无需手动设置Content-Type，XHR会自动处理multipart请求的边界信息
    xhr.send(formData);
});

方法二：先上传图片到公开存储服务

如果必须使用Embed的image.url字段，需要先将Canvas图片上传到支持公开访问的存储服务，获取公开URL后再填入Embed配置：

// 假设已将Canvas图片上传到存储服务，拿到公开URL
const imageUrl = "https://example.com/your-canvas-image.png";

const xhr = new XMLHttpRequest();
xhr.open("POST", webHookURL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
    content: message,
    username: "AI",
    embeds: [{
        image: {
            url: imageUrl
        }
    }]
}));