如何将JointJS生成的SVG导出为PNG文件？

我有一个基础静态站点，使用免费的JointJS库绘制交互式图表。该库生成的图表为SVG格式，我能成功导出为SVG文件，但无法导出为PNG文件。

目前导出SVG的代码运行正常：

function saveSvg (svgEl, name) {
  /*
  Download the diagram as a SVG file
  */
  // Serialize the SVG HTML data
  let svgData = new XMLSerializer().serializeToString(svgEl)
  // Clean the HTML tootltips out of the SVG data
  svgData = svgData.replace(/data-bs-title=".*?"/gm, '')
  // Build the base64 SVG image data
  const image64 = 'data:image/svg+xml;base64,' + window.btoa(svgData)
  // Create a download URL for the SVG file
  const img = document.createElement('img')
  // Set the source for the image to the base64 image data
  img.src = image64
  // Create a link for the download
  const downloadLink = document.createElement('a')
  // Set the URL for the download link
  downloadLink.href = image64
  // Set the file name
  downloadLink.download = name
  // Add the download link to the document
  document.body.appendChild(downloadLink)
  // Simulate a click on the link
  downloadLink.click()
  // Remove the link from the document
  document.body.removeChild(downloadLink)
}

但尝试将SVG绘制到canvas，再用canvas.toDataURL()生成PNG的base64时，得到的总是空白PNG文件。手动创建的基础SVG用相同流程却能正常导出，请问我忽略了什么问题？

出现空白PNG通常是以下几个原因导致的，对应解决方法如下：

1. SVG跨域资源问题 #

JointJS生成的SVG可能引用了外部资源（比如字体、图片），这些资源存在跨域限制，canvas绘制时会被浏览器拦截，导致绘制失败。

• 解决：把外部资源转为内联形式，比如字体用base64嵌入SVG，图片转为data URI；或者确保资源和站点同域，且服务器配置了CORS允许访问。

2. SVG未完全加载/渲染完成 #

直接拿序列化的SVG绘制到canvas时，可能SVG内部的元素还没完全渲染，或者img元素加载SVG的异步过程没处理好。

• 解决：必须等待img加载完成后再绘制到canvas，示例代码：

function svgToPng(svgEl, name) {
  let svgData = new XMLSerializer().serializeToString(svgEl);
  svgData = svgData.replace(/data-bs-title=".*?"/gm, '');
  const image64 = 'data:image/svg+xml;base64,' + window.btoa(svgData);
  
  const img = new Image();
  // 关键：设置跨域，避免跨域资源拦截
  img.crossOrigin = 'anonymous';
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    
    const downloadLink = document.createElement('a');
    downloadLink.href = canvas.toDataURL('image/png');
    downloadLink.download = `${name}.png`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  };
  img.src = image64;
}

3. SVG尺寸问题 #

JointJS生成的SVG可能没有明确设置width和height属性，canvas绘制时无法获取正确尺寸，导致绘制区域为0。

• 解决：序列化SVG前，给SVG元素添加明确的width和height值，比如：

// 在序列化前设置SVG尺寸
svgEl.setAttribute('width', svgEl.getBoundingClientRect().width);
svgEl.setAttribute('height', svgEl.getBoundingClientRect().height);

4. SVG内部的CSS样式未内联 #

JointJS可能用外部CSS控制SVG样式，canvas绘制SVG时无法读取外部样式，导致元素不可见。

• 解决：把所有外部CSS样式内联到SVG元素上，可以用工具或代码实现样式内联，确保SVG包含完整的样式定义。

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