导出的img无法正常显示，问题分析临时处理方式，以及如何修改x6-plugin-export，千字分析

[hero8080]

Describe the bug

导出插件，无法显示img

Your Example Website or App

none

Steps to Reproduce the Bug or Issue

none

Expected behavior

导出的画布可以显示img

Screenshots or Videos

none

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 2.11.1]

"@antv/g6": "4.8.24",
"@antv/x6": "2.18.1",
"@antv/x6-plugin-clipboard": "2.1.6",
"@antv/x6-plugin-dnd": "2.1.1",
"@antv/x6-plugin-export": "2.1.6",
"@antv/x6-plugin-history": "2.2.4",
"@antv/x6-plugin-keyboard": "2.2.3",
"@antv/x6-plugin-selection": "2.2.2",
"@antv/x6-plugin-snapline": "2.1.7",
"@antv/x6-vue-shape": "2.1.2",

Additional context

一般为了效果和效率，会选择使用vue或者react的shape创建节点，这种充分使用了css的样式，一些transtion都可以用，当在这些节点中使用了img标签引入svg图片或者jpg，png时，在画布上显示是没什么问题的，但是到了导出的时候就会出现图片显示不出来，其实根本原因在于img和svg的image不一样，export插件貌似只处理了svg的image，对与foreignObject的中的img并没有处理，导出以后是不显示图片的，就算我们给图片一个http开头的地址，它也是不显示的（jpg，png不显示），当然呢说话要严谨，导出svg是显示的，因为svg打开的时候可以获取网络中的图片，甚至可以保留hover效果，导出jpg和png不行了

如果我们刚一开始就使用base64图片作为img的src，svg和jpg、png是不是都可以了，经过测试还真可以，base64在内存中，不论是导出jpg还是svg他们都是一出生就有的，所以对于jpg和png都有效果，于是vueshape的节点中添加以下代码，可以正常导出jpg、svg、png

<script setup lang="ts">
const onImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement;
  // 创建 canvas 元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  if (!ctx) {
    console.error('Canvas context not available');
    return;
  }

  const width = img.width * 3 * window.devicePixelRatio;
  const height = img.height * 3 * window.devicePixelRatio;

  // 设置 canvas 尺寸与图片相同
  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(img, 0, 0, width, height);
  img.src = canvas.toDataURL('image/png');
};
</script>
<template>
<div>
    <img class="img" :src="`/image/xxx.jpg`" @load="onImageLoad" />
    <img class="img" :src="`/image/xxx.svg`" @load="onImageLoad" />
    <img class="img" :src="`/image/xxx.png`" @load="onImageLoad" />
    <img class="img" :src="`http://localhost:8808/image/xxx.png`" @load="onImageLoad" />
</div>
<template>

实际上在运行的时候这个是很难感觉出卡顿，当问题分析道这里，临时处理没啥问题了，接下来我们继续分析，如果把这个代码放在@antv\x6-plugin-export包里如何处理呢，处理思路是一样的，但也遇到问题，万事开头难，先把包的文件复制一下

Vector.create使用处理好img的svg

从getCopySvg中处理img的src为base64图像

为什么循环rowImgs，而不是copyImgs，因为copyImgs获取的图像高度为0，没有插入到dom中

使用方式

import { Export } from '../x6-plugin-export/src';