使用fetch发送canvas的Data URI至Google Sheets报错修复方法

你遇到的报错和data_sent本身的定义无关，是代码逻辑存在3个核心问题导致的：

• 给id为save的按钮重复绑定了2次onclick事件，后一次绑定直接覆盖前一次，且绑定写法错误：post_trigger(image, uuid)是页面加载时就立即执行函数，不是把函数设为点击回调，这时候点击事件根本不会触发你写的取图片base64的逻辑。
• 传入post_trigger的参数image是saveAsImg函数内部的局部变量，全局作用域访问不到，且你本来需要传的是canvas转出来的base64数据（也就是image_data），不是未定义的全局image。
• 附带逻辑问题：fetch的请求地址没加HTTP协议，会被识别为相对路径；空画布场景下弹完提示仍然会返回空的canvas地址，会提交无效数据。

把点击事件逻辑合并，点击时先取canvas生成的base64，校验非空后再发请求，修正代码如下：

// 画布转base64方法
this.saveAsImg = function() {
    const imageSrc = this.canvas.toDataURL("image/png");
    if (imageSrc === this.emptyCanvas) {
        alert('請先書寫')
        return null; // 空画布直接返回null，拦截后续提交
    }
    console.log('提交的內容===>', imageSrc)
    return imageSrc;
};

// 提交请求方法
function post_trigger(image_data, uuid) {
    // 补全请求地址协议，按你实际后端服务修改http/https
    let url = 'http://localhost:5050';
    let data_sent = image_data;
    fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            email: data_sent
            //deviceID: uuid
        })
    }).then((response) => {
        return response.json();
    }).then((jsonData) => {
        console.log(jsonData);
    }).catch((err) => {
        console.log('錯誤:', err);
    })
}

// 只绑定一次点击事件，点击时按顺序执行取值、校验、提交逻辑
document.getElementById('save').onclick = function() {
    // 先获取canvas转好的base64
    const image_data = writeCanvas.saveAsImg();
    // 空内容直接拦截，不发请求
    if (!image_data) return;
    // 替换为你实际业务里的uuid变量
    const uuid = '';
    // 拿到有效数据后再调用提交方法
    post_trigger(image_data, uuid);
};

• 删除重复的onclick绑定，把「生成base64」「校验内容」「发请求」的逻辑合并到同一个点击回调里，保证执行顺序正确。
• 修正事件绑定写法：不再在绑定时直接执行post_trigger，而是点击触发后先拿到有效image_data再传参调用，从根源避免参数未定义的问题。
• 空画布场景返回null做拦截，避免提交无效数据。
• 补全fetch请求的地址协议，避免请求路径解析错误。

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