feat: add format and quality parameters toDataURL function

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

@@ -356,15 +356,20 @@ String toDataURL() {
     return Base64.encodeToString(bitmapBytes, Base64.NO_WRAP);
   }
 
-  String toDataURL(int width, int height) {
+  String toDataURL(int width, int height, String format, Integer quality) {
     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);
+    if (format.equals("jpeg")) {
+      int checkQualityValue = (quality != null) ? quality : 100;
+      bitmap.compress(Bitmap.CompressFormat.JPEG, checkQualityValue, 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,10 @@ public void run() {
                   });
             } else {
               if (options != null) {
+                  Integer quality = options.hasKey("quality") ? options.getInt("quality") : null;
+                  String format = options.hasKey("format") ? options.getString("format") : null;
                 successCallback.invoke(
-                    svg.toDataURL(options.getInt("width"), options.getInt("height")));
+                    svg.toDataURL(options.getInt("width"), options.getInt("height"), format, quality));
               } else {
                 successCallback.invoke(svg.toDataURL());
               }

apple/Elements/RNSVGSvgView.h

@@ -62,7 +62,8 @@
 
 - (RNSVGFilter *)getDefinedFilter:(NSString *)filterName;
 
-- (NSString *)getDataURLWithBounds:(CGRect)bounds;
+- (NSString *)getDataURLWithBounds:(CGRect)bounds format:(NSString *)format;
+- (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];
@@ -374,10 +374,21 @@ - (NSString *)getDataURLWithBounds:(CGRect)bounds
   }];
 #endif
 #if !TARGET_OS_OSX // [macOS]
-  NSData *imageData = UIImagePNGRepresentation(image);
+  NSData *imageData;
+  if ([format isEqual:@"jpeg"]) {
+    imageData = UIImageJPEGRepresentation(image, quality);
+  } else {
+    imageData = UIImagePNGRepresentation(image);
+  }
   NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithLineFeed];
 #else // [macOS
-  NSData *imageData = UIImagePNGRepresentation(UIGraphicsGetImageFromCurrentImageContext());
+  NSData *imageData;
+  NSImage *image = UIGraphicsGetImageFromCurrentImageContext();
+  if ([format isEqual:@"jpeg"]) {
+    imageData = UIImageJPEGRepresentation(image, quality);
+  } else {
+    imageData = UIImagePNGRepresentation(image);
+  }
   NSString *base64 = [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithLineFeed];
   UIGraphicsEndImageContext();
 #endif // macOS]

apple/RNSVGSvgViewModule.mm

@@ -38,7 +38,7 @@ - (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"];
       } else {
         id width = [options objectForKey:@"width"];
         id height = [options objectForKey:@"height"];
@@ -52,7 +52,10 @@ - (void)toDataURL:(nonnull NSNumber *)reactTag
         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/test-examples/src/Test2233.tsx

@@ -1,20 +1,41 @@
 import * as React from 'react';
-import {Button, SafeAreaView, View} from 'react-native';
-import Svg, {Path} from 'react-native-svg';
+import {Button, Dimensions, SafeAreaView, View} from 'react-native';
+import Svg, {Path, type ToDataUrlOptions} from 'react-native-svg';
 
 const SvgLogoWelcome = () => {
   const ref = React.useRef<Svg | null>(null);
+
+  const {width, height} = Dimensions.get('screen');
+  const optionsWithJPEGFormat: ToDataUrlOptions = {
+    format: 'jpeg',
+    width,
+    height,
+    quality: 100,
+  };
+
+  const optionsWithPNGFormat: ToDataUrlOptions = {
+    format: 'png',
+    width,
+    height,
+  };
+
   return (
-    <View>
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
       <Button
         onPress={() => {
           ref.current?.toDataURL(base64Image => {
             console.log(base64Image, 'data');
-          });
+          }, optionsWithJPEGFormat);
         }}
         title="log"
       />
-      <Svg ref={ref} viewBox="0 0 24 24" fill="black">
+      <Svg ref={ref} viewBox="0 0 24 24" fill="black" width={250} height={250}>
         <Path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0-2C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.507 13.941c-1.512 1.195-3.174 1.931-5.506 1.931-2.334 0-3.996-.736-5.508-1.931L6 14.434C7.127 16.154 9.2 18 12.001 18c2.8 0 4.872-1.846 5.999-3.566l-.493-.493zM8.5 8a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm7 0a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
       </Svg>
     </View>

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, ToDataUrlOptions } 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, ToDataUrlOptions } 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: ToDataUrlOptions) {
     const ref = this.elementRef.current;
 
     if (ref === null) {
@@ -264,6 +261,14 @@ export class Svg extends WebShape<BaseProps & SvgProps> {
 
     const width = Number(options.width) || rect.width;
     const height = Number(options.height) || rect.height;
+    // Set format, defaulting to 'png'
+    const format = options.format === 'jpeg' ? 'image/jpeg' : 'image/png';
+    // Get quality, only applicable for JPEG
+
+    let quality = 0.92; // Default quality is 0.92 for JPEG
+    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 +283,14 @@ 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,', ''));
+      // Get the data URL with the specified format and quality
+      const dataURL =
+        format === 'image/jpeg'
+          ? canvas.toDataURL(format, quality)
+          : canvas.toDataURL(format);
+      // Return the data URL, removing the prefix if it's PNG to match your original implementation
+      const base64Data = dataURL.replace(`data:${format};base64,`, '');
+      callback(base64Data);
     };
 
     img.src = `data:image/svg+xml;utf8,${encodeSvg(

src/elements/Svg.tsx

@@ -45,6 +45,40 @@
   title?: string;
 }
 
+export type ToDataUrlOptions = JpegOptions | PngOptions;
+
+interface JpegOptions {
+  format: 'jpeg';
+  quality?: number; // Quality is optional but only available when format is 'jpeg'
+  width: number;
+  height: number;
+}
+
+interface PngOptions {
+  format: 'png';
+  width: number;
+  height: number;
+}
+
+function checkOptions(options?: ToDataUrlOptions) {
+  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.1 || options.quality > 1)) {
+    return false;
+  }
+  // Android requires quality to be a number between 0 and 100
+  if (Platform.OS === 'android' && options.quality) {
+    options.quality = Math.round(options.quality * 100);
+  }
+  return true;
+}
+
 export default class Svg extends Shape<SvgProps> {
   static displayName = 'Svg';
 
@@ -81,10 +115,14 @@
     root && root.setNativeProps(props);
   };
 
-  toDataURL = (callback: (base64: string) => void, options?: object) => {
+  toDataURL = (
+    callback: (base64: string) => void,
+    options?: ToDataUrlOptions
+  ) => {
     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 +223,7 @@
         props.transform = gStyle.transform;
         gStyle.transform = undefined;
       }
       props.transform = extractTransformSvgView(props as any);
     }
 
     const RNSVGSvg = Platform.OS === 'android' ? RNSVGSvgAndroid : RNSVGSvgIOS;