feat: add format and quality parameters toDataURL function

android/src/main/java/com/horcrux/svg/SvgView.java

@@ -22,6 +22,7 @@
 import android.view.accessibility.AccessibilityNodeInfo;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.uimanager.ReactCompoundView;
 import com.facebook.react.uimanager.ReactCompoundViewGroup;
@@ -356,15 +357,25 @@ String toDataURL() {
     return Base64.encodeToString(bitmapBytes, Base64.NO_WRAP);
   }
 
-  String toDataURL(int width, int height) {
+  String toDataURL(final ReadableMap options) {
+    int width = options.hasKey("width") ? options.getInt("width") : getWidth();
+    int height = options.hasKey("height") ? options.getInt("height") : getHeight();
     Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
 
     clearChildCache();
     drawChildren(new Canvas(bitmap));
     clearChildCache();
     this.invalidate();
     ByteArrayOutputStream stream = new ByteArrayOutputStream();
-    bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
+
+    Integer quality = options.hasKey("quality") ? options.getInt("quality") : null;
+    String format = options.hasKey("format") ? options.getString("format") : null;
+    if (format.equals("jpeg")) {
+      int qualityValue = (quality != null) ? Math.round(quality * 100) : 100;
+      bitmap.compress(Bitmap.CompressFormat.JPEG, qualityValue, stream);
+    } else {
+      bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
+    }
     bitmap.recycle();
     byte[] bitmapBytes = stream.toByteArray();
     return Base64.encodeToString(bitmapBytes, Base64.NO_WRAP);

android/src/main/java/com/horcrux/svg/SvgViewModule.java

@@ -67,8 +67,9 @@ public void run() {
                   });
             } else {
               if (options != null) {
+
                 successCallback.invoke(
-                    svg.toDataURL(options.getInt("width"), options.getInt("height")));
+                    svg.toDataURL(options));
               } else {
                 successCallback.invoke(svg.toDataURL());
               }

apple/Elements/RNSVGSvgView.h

@@ -62,7 +62,7 @@
 
 - (RNSVGFilter *)getDefinedFilter:(NSString *)filterName;
 
-- (NSString *)getDataURLWithBounds:(CGRect)bounds;
+- (NSString *)getDataURLWithBounds:(CGRect)bounds format:(NSString *)format quality:(CGFloat)quality;
 
 - (CGRect)getContextBounds;
 

apple/Elements/RNSVGSvgView.mm

@@ -358,7 +358,7 @@ - (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
   return isPointInside ? self : nil;
 }
 
-- (NSString *)getDataURLWithBounds:(CGRect)bounds
+- (NSString *)getDataURLWithBounds:(CGRect)bounds format:(NSString *)format quality:(CGFloat)quality
 {
 #if !TARGET_OS_OSX // [macOS]
   UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:bounds.size];
@@ -373,12 +373,17 @@ - (NSString *)getDataURLWithBounds:(CGRect)bounds
 #if !TARGET_OS_OSX // [macOS]
   }];
 #endif
-#if !TARGET_OS_OSX // [macOS]
-  NSData *imageData = UIImagePNGRepresentation(image);
-  NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithLineFeed];
-#else // [macOS
-  NSData *imageData = UIImagePNGRepresentation(UIGraphicsGetImageFromCurrentImageContext());
+  NSData *imageData;
+#if TARGET_OS_OSX // [macOS
+  NSImage *image = UIGraphicsGetImageFromCurrentImageContext();
+#endif // macOS]
+  if ([format isEqual:@"jpeg"]) {
+    imageData = UIImageJPEGRepresentation(image, quality);
+  } else {
+    imageData = UIImagePNGRepresentation(image);
+  }
   NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithLineFeed];
+#if TARGET_OS_OSX // [macOS
   UIGraphicsEndImageContext();
 #endif // macOS]
   return base64;

apple/RNSVGSvgViewModule.mm

@@ -38,21 +38,24 @@ - (void)toDataURL:(nonnull NSNumber *)reactTag
     if ([view isKindOfClass:[RNSVGSvgView class]]) {
       RNSVGSvgView *svg = view;
       if (options == nil) {
-        b64 = [svg getDataURLWithBounds:svg.boundingBox];
+        b64 = [svg getDataURLWithBounds:svg.boundingBox format:@"png" quality:1.0];
       } else {
+        CGRect bounds;
         id width = [options objectForKey:@"width"];
         id height = [options objectForKey:@"height"];
-        if (![width isKindOfClass:NSNumber.class] || ![height isKindOfClass:NSNumber.class]) {
-          RCTLogError(@"Invalid width or height given to toDataURL");
-          return;
+        if (![width isKindOfClass:NSNumber.class] && ![height isKindOfClass:NSNumber.class]) {
+          bounds = svg.boundingBox;
+        } else {
+          NSNumber *w = width;
+          NSInteger wi = w ? (NSInteger)[w intValue] : svg.boundingBox.size.width;
+          NSNumber *h = height;
+          NSInteger hi = h ? (NSInteger)[h intValue] : svg.boundingBox.size.height;
+          bounds = CGRectMake(0, 0, wi, hi);
         }
-        NSNumber *w = width;
-        NSInteger wi = (NSInteger)[w intValue];
-        NSNumber *h = height;
-        NSInteger hi = (NSInteger)[h intValue];
-
-        CGRect bounds = CGRectMake(0, 0, wi, hi);
-        b64 = [svg getDataURLWithBounds:bounds];
+        NSString *format = [options objectForKey:@"format"];
+        NSNumber *qualityNumber = [options objectForKey:@"quality"];
+        CGFloat quality = qualityNumber ? [qualityNumber doubleValue] : 1.0;
+        b64 = [svg getDataURLWithBounds:bounds format:format quality:quality];
       }
     } else {
       RCTLogError(@"Invalid svg returned from registry, expecting RNSVGSvgView, got: %@", view);

apps/examples/src/examples/Svg.tsx

@@ -1,6 +1,14 @@
 import React, {Component} from 'react';
-import {StyleSheet, View, Image} from 'react-native';
-import {Svg, Circle, G, Path, Line, Rect} from 'react-native-svg';
+import {StyleSheet, View, Image, Dimensions} from 'react-native';
+import {
+  Svg,
+  Circle,
+  G,
+  Path,
+  Line,
+  Rect,
+  DataUrlOptions,
+} from 'react-native-svg';
 
 const styles = StyleSheet.create({
   container: {
@@ -131,14 +139,27 @@ class SvgNativeMethods extends Component {
   state = {
     base64: null,
   };
+
+  optionsWithJPEGFormat: DataUrlOptions = {
+    format: 'jpeg',
+    width: 150,
+    height: 100,
+    quality: 1,
+  };
+
+  optionsWithPNGFormat: DataUrlOptions = {
+    format: 'png',
+    width: 150,
+    height: 100,
+  };
+
   alert = () => {
     console.log('PRESSED');
     this.root?.toDataURL((base64: string) => {
       this.setState({
         base64,
       });
-    });
-
+    }, this.optionsWithJPEGFormat);
     console.log(this.circle?.isPointInFill({x: 200, y: 100}));
     console.log(this.circle?.isPointInStroke({x: 200, y: 100}));
     console.log(this.circle?.getTotalLength());

apps/test-examples/src/Test2233.tsx

@@ -4,6 +4,7 @@ import Svg, {Path} from 'react-native-svg';
 
 const SvgLogoWelcome = () => {
   const ref = React.useRef<Svg | null>(null);
+
   return (
     <View>
       <Button

src/ReactNativeSVG.ts

@@ -107,7 +107,7 @@ export type { PolylineProps } from './elements/Polyline';
 export type { RadialGradientProps } from './elements/RadialGradient';
 export type { RectProps } from './elements/Rect';
 export type { StopProps } from './elements/Stop';
-export type { SvgProps } from './elements/Svg';
+export type { SvgProps, DataUrlOptions } from './elements/Svg';
 export type { SymbolProps } from './elements/Symbol';
 export type { TextProps } from './elements/Text';
 export type { TextPathProps } from './elements/TextPath';

src/elements.web.ts

@@ -43,7 +43,7 @@ import type { PolylineProps } from './elements/Polyline';
 import type { RadialGradientProps } from './elements/RadialGradient';
 import type { RectProps } from './elements/Rect';
 import type { StopProps } from './elements/Stop';
-import type { SvgProps } from './elements/Svg';
+import type { SvgProps, DataUrlOptions } from './elements/Svg';
 import type { SymbolProps } from './elements/Symbol';
 import type { TextProps } from './elements/Text';
 import type { TextPathProps } from './elements/TextPath';
@@ -250,10 +250,7 @@ export class Stop extends WebShape<BaseProps & StopProps> {
 
 export class Svg extends WebShape<BaseProps & SvgProps> {
   tag = 'svg' as const;
-  toDataURL(
-    callback: (data: string) => void,
-    options: { width?: number; height?: number } = {}
-  ) {
+  toDataURL(callback: (data: string) => void, options: DataUrlOptions) {
     const ref = this.elementRef.current;
 
     if (ref === null) {
@@ -264,6 +261,12 @@ export class Svg extends WebShape<BaseProps & SvgProps> {
 
     const width = Number(options.width) || rect.width;
     const height = Number(options.height) || rect.height;
+    const format = options.format === 'jpeg' ? 'image/jpeg' : 'image/png';
+
+    let quality: number | undefined;
+    if (options && options.format === 'jpeg' && options.quality) {
+      quality = options.quality;
+    }
 
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);
@@ -278,7 +281,9 @@ export class Svg extends WebShape<BaseProps & SvgProps> {
       canvas.height = height;
       const context = canvas.getContext('2d');
       context?.drawImage(img, 0, 0);
-      callback(canvas.toDataURL().replace('data:image/png;base64,', ''));
+      const dataURL = canvas.toDataURL(format, quality);
+      const base64Data = dataURL.replace(`data:${format};base64,`, '');
+      callback(base64Data);
     };
 
     img.src = `data:image/svg+xml;utf8,${encodeSvg(

src/elements/Svg.tsx

@@ -45,6 +45,36 @@
   title?: string;
 }
 
+export type DataUrlOptions = JpegOptions | PngOptions;
+
+interface JpegOptions {
+  format: 'jpeg';
+  quality?: number;
+  width?: NumberProp;
+  height?: NumberProp;
+}
+
+interface PngOptions {
+  format: 'png';
+  width?: NumberProp;
+  height?: NumberProp;
+}
+
+function checkOptions(options?: DataUrlOptions) {
+  if (options && options?.format === 'jpeg') {
+    if (!validateJpegQualityParameter(options)) {
+      throw new Error('toDataURL: Invalid quality parameter for JPEG format.');
+    }
+  }
+}
+
+function validateJpegQualityParameter(options: JpegOptions): boolean {
+  if (options.quality && (options.quality < 0 || options.quality > 1)) {
+    return false;
+  }
+  return true;
+}
+
 export default class Svg extends Shape<SvgProps> {
   static displayName = 'Svg';
 
@@ -81,10 +111,14 @@
     root && root.setNativeProps(props);
   };
 
-  toDataURL = (callback: (base64: string) => void, options?: object) => {
+  toDataURL = (
+    callback: (base64: string) => void,
+    options?: DataUrlOptions
+  ) => {
     if (!callback) {
       return;
     }
+    checkOptions(options);
     const handle = findNodeHandle(this.root as Component);
     const RNSVGSvgViewModule: Spec =
       // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -185,7 +219,7 @@
         props.transform = gStyle.transform;
         gStyle.transform = undefined;
       }
       props.transform = extractTransformSvgView(props as any);
     }
 
     const RNSVGSvg = Platform.OS === 'android' ? RNSVGSvgAndroid : RNSVGSvgIOS;