feat: add getDataURL support

Author: zhiqingchen

src/SVGRenderer.ts

@@ -1,11 +1,12 @@
+import env from 'zrender/lib/core/env';
 import SVGPainter from 'zrender/lib/svg/Painter';
-
 import { vNodeToString } from './SVGCore';
 import { updateAttrs } from 'zrender/lib/svg/patch';
 import type Storage from 'zrender/lib/Storage';
 import { DOMParser } from '@xmldom/xmldom';
 
 const isRn = globalThis.navigator?.product === 'ReactNative';
+env.svgSupported = true;
 
 interface SVGPainterOption {
   width?: number;
@@ -69,6 +70,15 @@ class CustomSVGPainter extends SVGPainter {
       super.refresh();
     }
   }
+  toDataURL(base64?: boolean):string {
+    // @ts-ignore
+    if (isRn && this._svgDom.makeImageSnapshot) {
+      // @ts-ignore
+      return this._svgDom.makeImageSnapshot() || super.toDataURL(base64);
+    } else {
+      return super.toDataURL(base64);
+    }
+  }
 }
 
 export function SVGRenderer(registers: any) {

src/skiaChart.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
 } from 'react';
 
-import { Canvas, ImageSVG, Skia, SkSVG } from '@shopify/react-native-skia';
+import { Canvas, ImageSVG, Skia, SkSVG, useCanvasRef } from '@shopify/react-native-skia';
 
 import { View } from 'react-native';
 
@@ -55,6 +55,7 @@ function SkiaComponent(
   const [width, setWidth] = useState<number>(initialWidth ?? 0);
   const [height, setHeight] = useState<number>(initialHeight ?? 0);
   const zrenderId = useRef<number>();
+  const canvasRef = useCanvasRef();
 
   const dispatchEvents = useCallback<DispatchEvents>(
     (types, nativeEvent, eventArgs) => {
@@ -86,6 +87,10 @@ function SkiaComponent(
         setZrenderId: (id: number) => {
           zrenderId.current = id;
         },
+        makeImageSnapshot: () => {
+          const image = canvasRef.current?.makeImageSnapshot();
+          return image ? `data:image/png;base64,${image.encodeToBase64()}` : null;
+        }
       },
       viewprot: {},
       dispatchEvents,
@@ -101,7 +106,7 @@ function SkiaComponent(
 
   return svgString ? (
     <View testID="component" style={{ ...style, width, height }}>
-      <Canvas style={{ ...style, width, height }} pointerEvents="auto">
+      <Canvas style={{ ...style, width, height }} pointerEvents="auto" ref={canvasRef}>
         <ImageSVG svg={svgString} x={0} y={0} width={width} height={height} />
       </Canvas>
       {handleGesture ? (