@antv/x6 加载网络图片为背景慢的问题的简单解决的方法

1、之前有一篇文章中写了加载本地图片为x6的背景图片失败的情况，但是实际项目中发现加载远程的图片，会有一个延迟的问题，导致了体验相当的差，也就是说有一段时间出现了慢慢的刷屏的问题，可能说体验很差。

2、为了这个问题，找了很多种方法去尝试，最后尝试出一种方法来，也就是将图片转了base64，然后再去加载，这样是可以的，实测通过。

3、代码：

async function resizeImage(imageUrl, width, height) {
    console.log(imageUrl, width, height);
    fetch(imageUrl)
      .then((response) => response.blob())
      .then((blob) => {
        // 创建一个Image对象
        const img = new Image();
        console.log(blob);
        // 使用ObjectURL将Blob转换为可直接使用的图片URL
        img.src = URL.createObjectURL(blob);
        img.width = width;
        img.height = height;
        // 在图片加载完成后执行的操作
        img.onload = () => {
          // 图片加载完成后，你可以将它插入DOM或者做其他操作
          // document.body.appendChild(img);
          const canvas = document.createElement('canvas');
          canvas.width = width;
          canvas.height = height;

          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, width, height);

          let quality = 1.0;
          const resizedBase64 = canvas.toDataURL('image/jpeg', quality);
          imgBg.value = resizedBase64;
          // 清除对象URL资源
          URL.revokeObjectURL(img.src);
          return resizedBase64;
        };
      })
      .catch((error) => {
        console.error('图片加载失败:', error);
        imgBg.value = null;
        return null;
      });
  }

4、有了base64以后，我们就可以直接drawBackground或者在初始化的时候：

1）直接在

background:{

   ...

   image: imgBg.value,

}

或者 调用drawBackground方法

graph.drawBackground({
    color: '#000',
    position:{
      x: 0,
      y: 0,
    },
    size: {
      width: widthPx,
      height: heightPx,
    },
    image: imgBg.value, // 设置背景图片
  })

5、注意：上面的drawBackground一样要在画布初始化完成以后调用，否则是看不到效果的。（除了黑屏，因为颜色是#000）。