I’m writing a add-in for excel and at the moment I’m generating an image based on parameters and returning them from a URL on a web server. I have discovered some of the rendering I’m doing can be acheieved using the HTML canvas tag. I was hoping it would be possible to generate the image in canvas the using the toDataUrl function and output to the WebImage content type.

So far efforts have been in vain, does any one have any insights?

Example below.

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 (canvas.getContext) {
      const ctx = canvas.getContext("2d");
  
      ctx.fillRect(25, 25, 100, 100);
      ctx.clearRect(45, 45, 60, 60);
      ctx.strokeRect(50, 50, 50, 50);
    }
  
    let jpegUrl = testCanvas.getDataURL("image/jpeg");
  } catch (e) {
    console.log(e);
  }

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

}

Excel doesn’t interpret the result as valid.