在Angular应用中实现JointJS+ SVG导出时图片显示异常求助

问题场景 #

在Angular应用中集成JointJS+的SVG导出功能，已在paper中添加多张图片，但导出的SVG文件里图片无法正常显示。

现有导出代码 #

exportAsSVG() {
  const exportOptions = {
    padding: 20,
    useComputedStyles: false,
    size: "2x"
  };
  format.toSVG(
    this.paper,
    (svg) => {
      util.downloadDataUri(
        `data:image/svg+xml,${encodeURIComponent(svg)}`,
        "jointjs+.svg"
      );
    },
    exportOptions
  );
}

导出异常表现 #

导出后的SVG中图片无法正常加载，仅显示占位或空白区域。

解决方案 #

1. 将图片转为Base64嵌入 #

SVG导出时无法直接解析本地/相对路径的图片，需要提前将图片转为Base64格式，再添加到JointJS元素中：

图片转Base64工具函数

imageToBase64(url: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      resolve(canvas.toDataURL('image/png'));
    };
    img.onerror = reject;
    img.src = url;
  });
}

用Base64创建图片元素

// 示例：添加带Base64图片的JointJS元素
const imagePath = 'assets/demo-image.png';
this.imageToBase64(imagePath).then(base64Data => {
  const imageShape = new shapes.standard.Image({
    position: { x: 50, y: 50 },
    size: { width: 150, height: 150 },
    attrs: {
      image: {
        href: base64Data,
        width: 150,
        height: 150
      }
    }
  });
  this.paper.model.addCell(imageShape);
});

2. 调整导出配置 #

修改exportOptions中的useComputedStyles为true，确保导出时包含完整的样式和资源引用信息：

const exportOptions = {
  padding: 20,
  useComputedStyles: true, // 改为true
  size: "2x"
};

3. 回调中修正SVG图片引用 #

如果无法提前处理图片，可以在导出回调中替换SVG里的图片路径为Base64：

format.toSVG(
  this.paper,
  async (svg) => {
    // 解析SVG字符串，替换image标签的href
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
    const imageElements = svgDoc.querySelectorAll('image');
    
    for (const imgEl of imageElements) {
      const originalUrl = imgEl.getAttribute('href') || imgEl.getAttribute('xlink:href');
      if (originalUrl) {
        const base64 = await this.imageToBase64(originalUrl);
        imgEl.setAttribute('href', base64);
        imgEl.removeAttribute('xlink:href');
      }
    }
    
    const modifiedSvg = new XMLSerializer().serializeToString(svgDoc);
    util.downloadDataUri(
      `data:image/svg+xml,${encodeURIComponent(modifiedSvg)}`,
      "jointjs+.svg"
    );
  },
  exportOptions
);

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