Thanks to visit codestin.com
Credit goes to github.com

Skip to content

export plugin不显示svg image,在配置了serializeImages: true的情况下 #4665

@aidenzhang97

Description

@aidenzhang97

Describe the bug

graph.exportPNG(undefined, { padding: 20, serializeImages: true }); 

中serializeImages配置通过将svg image的 href转为base64编码实现本地显示,但是在转换后的处理中使用了如下方式绑定转换后的base64数据:

  if (options.serializeImages) {
    const deferrals = vSVG.find('image').map((vImage) => {
      return new Promise<void>((resolve) => {
        const url = vImage.attr('xlink:href') || vImage.attr('href')
        DataUri.imageToDataUri(url, (err, dataUri) => {
          if (!err && dataUri) {
            vImage.attr('xlink:href', dataUri) // FIXME: 这里使用了xlink:href,
          }
          resolve()
        })
      })
    })

    Promise.all(deferrals).then(format)
  }

对于svg2,官方移除了xlink:href 转而使用 href,因此此处读取属性兼容svg1,svg2,但是写入不兼容svg2,从而导致导出的PNG无法显示正确image。需要改为:

 vImage.attr('xlink:href', dataUri); // 兼容svg1
 vImage.attr('href', dataUri); // 兼容svg2

Your Example Website or App

Steps to Reproduce the Bug or Issue

  1. 创建并显示任意带有image的markup的节点图形化
  2. 利用export插件执行exportPng方法,serializeImages配置为true

Expected behavior

导出的png中,正确显示image中的图标

Screenshots or Videos

No response

Platform

  • OS: Windows
  • Browser: Chrome
  • Version: 136.0.7103.114

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions