如何通过JavaScript API将用户生成的Data URI格式图片插入Google Sheets单元格

我完全懂你的需求——想把用户生成的图片（Data URI格式）直接塞进Google Sheets单元格，还不想把图片放到公开可访问的URL上，毕竟涉及隐私或者不想对外暴露。你遇到的=IMAGE()函数报错很正常，直到现在Google Sheets的IMAGE()函数还是不支持Data URI作为参数，这也是那个7年前的方案现在行不通的原因。

不过别担心，用**Google Apps Script配合前端的google.script.run**就能解决这个问题，而且完全符合你的需求，不需要公开URL。下面是具体的实现步骤：

第一步：修改前端JavaScript代码 #

不用再拼接=IMAGE()公式了，直接把Data URI传给我们即将写的Apps Script函数：

function save() {
    var dataURI = canvas.toDataURI();
    dataURI = dataURI.toString();

    // 调用Apps Script中的函数，传入Data URI、表格ID和单元格范围
    google.script.run
        .withSuccessHandler(() => {
            // 成功后的跳转逻辑
            window.location.href = nextPage.html;
        })
        .withFailureHandler(error => {
            console.error('插入图片失败:', error);
        })
        .insertImageFromDataURI(sheet, range, dataURI);
}

第二步：编写Google Apps Script代码 #

在你的Google Sheets绑定的Apps Script项目里，添加下面的函数，它会把Data URI转换成Blob，再创建可插入单元格的图片对象：

function insertImageFromDataURI(spreadsheetId, rangeStr, dataURI) {
    // 从Data URI中提取MIME类型和base64数据
    const matches = dataURI.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/);
    if (!matches || matches.length !== 3) {
        throw new Error('无效的Data URI格式');
    }
    
    const mimeType = matches[1];
    const base64Data = matches[2];
    // 将base64数据转成Blob
    const blob = Utilities.newBlob(Utilities.base64Decode(base64Data), mimeType);
    
    // 创建单元格图片对象
    const cellImage = SpreadsheetApp.newCellImage()
        .setSource(blob)
        .build();
    
    // 获取表格和单元格，插入图片
    const spreadsheet = SpreadsheetApp.openById(spreadsheetId);
    const range = spreadsheet.getRange(rangeStr);
    range.setValue(cellImage);
}

为什么这个方案可行？ #

• SpreadsheetApp.newCellImage()支持通过Blob创建图片，而我们把Data URI转成Blob后，就能被这个方法识别，最终图片会直接嵌入到单元格里，不需要依赖外部URL。
• 整个过程都是在Google的生态内完成的，图片不会被公开，完全符合你的隐私需求。

这个方法比直接用Sheets API更灵活，也能解决Data URI无法被=IMAGE()识别的问题，算是目前最直接的解决方案了。

备注：内容来源于stack exchange，提问作者Gertrude