fix: v2 image bugfix

Author: 李志豪

src/skia/graphic.tsx

@@ -24,6 +24,7 @@ import SkiaPathRebuilder from './SkiaPathRebuilder';
 import { ReactElement } from 'react';
 import mapStyleToAttrs from 'zrender/lib/svg/mapStyleToAttrs';
 import {
+  Skia,
   Path as SkiaPath,
   Text as SkiaText,
   matchFont,
@@ -313,17 +314,32 @@ export function brushSVGImage(
       y={y}
       width={dw}
       height={dh}
+      {...attrs}
     >
       {effects}
     </SkiaImage>
   );
 }
 type CustomImageProps = SkiaProps<ImageProps> & {
   href: string;
+  height?: number;
+  width?: number;
   children?: ReactElement[];
 };
 function SkiaImage({ href, children, ...attrs }: CustomImageProps) {
-  const skiaImage = useImage(href);
+  let skiaImage = useImage(href);
+  // Base64 image
+  if (href.indexOf(';base64') > -1) {
+    const base64Data = href.split(',')[1] || '';
+    const binaryData = Skia.Data.fromBase64(base64Data);
+    skiaImage = Skia.Image.MakeImageFromEncoded(binaryData);
+  }
+  const imageInfo = skiaImage?.getImageInfo();
+  if (imageInfo && !attrs.width) {
+    const { height: oriHeight, width: oriWidth } = imageInfo;
+    attrs.width = attrs.height ? (attrs.height / oriHeight) * oriWidth : 0;
+  }
+  // attrs.fit = 'fill'; // Here you can set 'Image' fit mode
   return (
     <Image {...attrs} image={skiaImage}>
       {children}

src/svg/svgChart.tsx

@@ -33,7 +33,7 @@ import React, {
   useCallback,
 } from 'react';
 
-import { Platform, View } from 'react-native';
+import { Platform, View, Image as RNImage } from 'react-native';
 
 import {
   setPlatformAPI,
@@ -80,6 +80,32 @@ const tagMap = {
   mask: Mask,
 };
 
+const imageSizeMap: any = {};
+
+interface ImageSize {
+  width: number;
+  height: number;
+}
+
+// 使用 async/await 获取图片尺寸
+const getImageSize = async (uri: string): Promise<ImageSize> => {
+  return new Promise((resolve, reject) => {
+    RNImage.getSize(
+      uri,
+      (width, height) => resolve({ width, height }),
+      (error) => reject(error)
+    );
+  });
+};
+
+async function imageInit(url: string) {
+  const { width, height } = await getImageSize(url);
+  imageSizeMap[url] = {
+    width,
+    height,
+  };
+}
+
 function toCamelCase(str: string) {
   var reg = /-(\w)/g;
   return str.replace(reg, function (_: any, $1: string) {
@@ -170,6 +196,17 @@ function SvgEle(props: SVGVEleProps) {
       </Tag>
     );
   }
+  if (tag === 'image' && !attrs.width) {
+    if (imageSizeMap[attrs.href]) {
+      const { width, height } = imageSizeMap[attrs.href];
+      attrs.width = (attrs.height / height) * width;
+      if (attrs.height === 0) {
+        attrs.opacity = 0;
+      }
+    } else {
+      imageInit(attrs.href);
+    }
+  }
   return (
     <Tag key={node.key} {...attrs}>
       {children?.map((child) => <SvgEle key={child.key} node={child} />)}