Excel WebImage类型是否支持Base64编码的Data URL格式图片？

先梳理你代码里的几个关键错误，再针对Excel不识别的问题给出适配方案：

一、代码本身的错误修正 #

1. API方法名拼写错误：Canvas的正确方法是toDataURL，而非你写的getDataURL。
2. 变量作用域冲突：try块内重新声明了let jpegUrl，导致外部的空字符串变量未被赋值，应去掉内部的let直接赋值。
3. 变量引用错误：if (canvas.getContext)里的canvas未定义，你创建的画布变量是testCanvas，需要修正引用。

修正后的基础代码：

function drawShape() {
  let jpegUrl = '';
  try {
    const canvasContainer = document.getElementById('canvas-container');
    canvasContainer.innerHTML = '';
    let testCanvas = document.createElement('canvas');
    testCanvas.setAttribute("width","300");
    testCanvas.setAttribute("height","300");
    canvasContainer.append(testCanvas);
  
    if (testCanvas.getContext) {
      const ctx = testCanvas.getContext("2d");
      ctx.fillRect(25, 25, 100, 100);
      ctx.clearRect(45, 45, 60, 60);
      ctx.strokeRect(50, 50, 50, 50);
    }
  
    // 修正方法名与作用域问题
    jpegUrl = testCanvas.toDataURL("image/jpeg");
  } catch (e) {
    console.log(e);
  }

  return {
    type: "WebImage",
    address: jpegUrl,
    altText: 'An Image'
  };
}

二、Excel不识别data URI的适配方案 #

即使修正了代码，Excel的WebImage类型通常只支持HTTP/HTTPS协议的外部URL，不接受base64格式的data URI。此时可以将Canvas生成的data URI转为Blob，再创建临时的Object URL：

function drawShape() {
  let imageUrl = '';
  try {
    const canvasContainer = document.getElementById('canvas-container');
    canvasContainer.innerHTML = '';
    let testCanvas = document.createElement('canvas');
    testCanvas.width = 300;
    testCanvas.height = 300;
    canvasContainer.append(testCanvas);
  
    if (testCanvas.getContext) {
      const ctx = testCanvas.getContext("2d");
      ctx.fillRect(25, 25, 100, 100);
      ctx.clearRect(45, 45, 60, 60);
      ctx.strokeRect(50, 50, 50, 50);
    }
  
    // 将data URI转为Blob，生成Object URL
    const dataUrl = testCanvas.toDataURL("image/jpeg");
    const blob = dataURItoBlob(dataUrl);
    imageUrl = URL.createObjectURL(blob);
  } catch (e) {
    console.log(e);
  }

  return {
    type: "WebImage",
    address: imageUrl,
    altText: 'An Image'
  };
}

// 辅助函数：把data URI转换为Blob对象
function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], {type: mimeString});
}

注意：Object URL是临时资源，需确保Excel完成图片加载后，再通过URL.revokeObjectURL(imageUrl)清理，避免内存泄漏。如果仍无法识别，需确认Excel插件API中WebImage的address字段限制，部分版本可能仅支持公开可访问的HTTP URL，此时仍需通过Web服务器中转。

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