将svg图片改成jpg/png的file类型

将svg图片改成jpg/png的file类型 

  const getImgFileUrl = useCallback(() => {
    let con = containerRef.current as unknown as HTMLElement;
    const svg = con.querySelector('svg') as SVGElement;
    const image = new Image();
    // 在Image对象加载完成后执行回调函数
    image.onload = function () {
      // 创建一个canvas元素
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
      // 设置canvas的尺寸与SVG容器相同
      canvas.width = svg.getAttribute('width').replace('px', '');
      canvas.height = svg.getAttribute('height').replace('px', '');

      // 在canvas上绘制SVG图像
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

      // 将canvas转换为DataURL
      const dataUrl = canvas.toDataURL(`image/${imgType.toLowerCase()}`); // 或者 "image/jpeg"

      // 将DataURL转换为Blob对象
      const blob = dataURLtoBlob(dataUrl);

      // 创建一个File对象
      const file = new File([blob], `image.${imgType.toLowerCase()}`, {
        type: `image/${imgType.toLowerCase()}`,
      }); // 或者 "image/jpeg"
      // 可以将file对象上传到服务器
      getImgUrl(file);
    };

    const svgData = new XMLSerializer().serializeToString(con.querySelector('svg') as SVGElement);
    image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);
  }, [imgType]);