如何将html2canvas生成的Base64图片发送至Discord Webhook？

我使用html2canvas对当前页面主体进行截图，希望将该截图发送至Discord Webhook（不使用discord.js）。我想发送Base64图片，最终让Discord频道显示该图片，请问如何修改我的代码使其生效？

我使用的代码如下：

const whurl = "-enter discord webhook-";

const screenshotTarget = document.body;

html2canvas(screenshotTarget).then((canvas) => {
    const base64image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

    const msg = {

        "embeds": [{
                "image": {
                    "url": base64image
                }
            }
        ]
    }

    fetch(whurl + "?wait=true", {
        "method": "POST",
        "headers": {
            "content-type": "application/json"
        },
        "body": JSON.stringify(msg)
    })
    .then(a => a.json()).then()
});

Discord Webhook的Embed图片URL不支持直接使用data:image/octet-stream格式的Base64串，且通过JSON发送Base64图片容易因数据过大触发限制，正确做法是用FormData上传图片：

关键修改点 #

• 保留image/png格式的Base64，不要替换为image/octet-stream
• 将Base64转换为Blob对象，通过FormData提交
• 改用multipart/form-data格式发送请求（fetch会自动处理请求头）

修改后的完整代码：

const whurl = "-enter discord webhook-";
const screenshotTarget = document.body;

html2canvas(screenshotTarget).then((canvas) => {
    // 保留原生image/png格式的Base64
    const base64image = canvas.toDataURL("image/png");
    // 将Base64转换为Blob对象
    const blob = dataURLToBlob(base64image);
    
    // 创建FormData，用于上传文件和消息内容
    const formData = new FormData();
    // 添加截图文件，name固定为"files[0]"，Discord会识别该字段
    formData.append("files[0]", blob, "page-screenshot.png");
    // 添加Embed配置，通过payload_json字段传递
    formData.append("payload_json", JSON.stringify({
        embeds: [{
            image: {
                // 使用attachment://文件名的格式关联上传的图片
                url: "attachment://page-screenshot.png"
            }
        }]
    }));

    // 发送请求，无需手动设置Content-Type
    fetch(whurl + "?wait=true", {
        method: "POST",
        body: formData
    })
    .then(res => res.json())
    .then(data => console.log("发送成功:", data))
    .catch(err => console.error("发送失败:", err));
});

// 辅助工具函数：将Base64字符串转为Blob
function dataURLToBlob(dataURL) {
    const [metaPart, base64Part] = dataURL.split(';base64,');
    const contentType = metaPart.split(':')[1];
    const raw = window.atob(base64Part);
    const uint8Array = new Uint8Array(raw.length);
    
    for (let i = 0; i < raw.length; i++) {
        uint8Array[i] = raw.charCodeAt(i);
    }
    
    return new Blob([uint8Array], { type: contentType });
}

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