Introduce a result option, one of file|base64|data-uri & Fixes #1

README.md

@@ -3,8 +3,6 @@
 
 Snapshot a React Native view and save it to an image.
 
-The image will be stored in a temporary file that will only exist for as long as the app is running.
-
 <img src="https://github.com/gre/react-native-view-shot-example/raw/master/docs/recursive.gif" width=300 />
 
 ## Usage
@@ -37,7 +35,12 @@ Returns a Promise of the image URI.
  - **`width`** / **`height`** *(number)*: the width and height of the image to capture.
  - **`format`** *(string)*: either `png` or `jpg`/`jpeg` or `webm` (Android). Defaults to `png`.
  - **`quality`** *(number)*: the quality. 0.0 - 1.0 (default). (only available on lossy formats like jpeg)
- - **`base64`** *(bool)*: if true, the promise returns the base64 encoded data instead of the uri. Defaults to `false`.
+ - **`result`** *(string)*, the method you want to use to save the snapshot, one of:
+   - `"file"` (default): save to a temporary file *(that will only exist for as long as the app is running)*.
+   - `"base64"`: encode as base64 and returns the raw string. Use only with small images as this may result of lags (the string is sent over the bridge). *N.B. This is not a data uri, use `data-uri` instead*.
+   - `"data-uri"`: same as `base64` but also includes the [Data URI scheme](https://en.wikipedia.org/wiki/Data_URI_scheme) header.
+
+   . if true, the promise returns the base64 encoded data instead of the uri. Defaults to `false`.
 
 
 ## Getting started

android/src/main/java/fr/greweb/reactnativeviewshot/RNViewShotModule.java

@@ -5,6 +5,7 @@ import android.content.Context;
 import android.graphics.Bitmap;
 import android.os.AsyncTask;
 import android.util.DisplayMetrics;
+import android.view.View;
 
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
@@ -55,17 +56,18 @@ public class RNViewShotModule extends ReactContextBaseJavaModule {
                         ? Bitmap.CompressFormat.WEBP
                         : null;
         if (compressFormat == null) {
-            throw new JSApplicationIllegalArgumentException("Unsupported image format: " + format);
+            promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Unsupported image format: "+format+". Try one of: png | jpg | jpeg");
+            return;
         }
         double quality = options.hasKey("quality") ? options.getDouble("quality") : 1.0;
         DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
         Integer width = options.hasKey("width") ? (int)(displayMetrics.density * options.getDouble("width")) : null;
         Integer height = options.hasKey("height") ? (int)(displayMetrics.density * options.getDouble("height")) : null;
-        boolean base64 = options.hasKey("base64") ? options.getBoolean("base64") : false;
+        String result = options.hasKey("result") ? options.getString("result") : "file";
         try {
-            File tmpFile = createTempFile(getReactApplicationContext(), format);
+            File tmpFile = "file".equals(result) ? createTempFile(getReactApplicationContext(), format) : null;
             UIManagerModule uiManager = this.reactContext.getNativeModule(UIManagerModule.class);
-            uiManager.addUIBlock(new ViewShot(tag, compressFormat, quality, width, height, tmpFile, base64, promise));
+            uiManager.addUIBlock(new ViewShot(tag, format, compressFormat, quality, width, height, tmpFile, result, promise));
         }
         catch (Exception e) {
             promise.reject(ViewShot.ERROR_UNABLE_TO_SNAPSHOT, "Failed to snapshot view tag "+tag);

android/src/main/java/fr/greweb/reactnativeviewshot/ViewShot.java

@@ -24,30 +24,33 @@ public class ViewShot implements UIBlock {
     static final String ERROR_UNABLE_TO_SNAPSHOT = "E_UNABLE_TO_SNAPSHOT";
 
     private int tag;
+    private String extension;
     private Bitmap.CompressFormat format;
     private double quality;
     private Integer width;
     private Integer height;
     private File output;
-    private boolean base64;
+    private String result;
     private Promise promise;
 
     public ViewShot(
             int tag,
+            String extension,
             Bitmap.CompressFormat format,
             double quality,
             @Nullable Integer width,
             @Nullable Integer height,
             File output,
-            boolean base64,
+            String result,
             Promise promise) {
         this.tag = tag;
+        this.extension = extension;
         this.format = format;
         this.quality = quality;
         this.width = width;
         this.height = height;
         this.output = output;
-        this.base64 = base64;
+        this.result = result;
         this.promise = promise;
     }
 
@@ -55,22 +58,38 @@ public class ViewShot implements UIBlock {
     public void execute(NativeViewHierarchyManager nativeViewHierarchyManager) {
         OutputStream os = null;
         View view = nativeViewHierarchyManager.resolveView(tag);
+        if (view == null) {
+            promise.reject(ERROR_UNABLE_TO_SNAPSHOT, "No view found with reactTag: "+tag);
+            return;
+        }
         try {
-            if (base64) {
+            if ("file".equals(result)) {
+                os = new FileOutputStream(output);
+                captureView(view, os);
+                String uri = Uri.fromFile(output).toString();
+                promise.resolve(uri);
+            }
+            else if ("base64".equals(result)) {
                 os = new ByteArrayOutputStream();
                 captureView(view, os);
                 byte[] bytes = ((ByteArrayOutputStream) os).toByteArray();
                 String data = Base64.encodeToString(bytes, Base64.NO_WRAP);
                 promise.resolve(data);
-            } else {
-                os = new FileOutputStream(output);
+            }
+            else if ("data-uri".equals(result)) {
+                os = new ByteArrayOutputStream();
                 captureView(view, os);
-                String uri = Uri.fromFile(output).toString();
-                promise.resolve(uri);
+                byte[] bytes = ((ByteArrayOutputStream) os).toByteArray();
+                String data = Base64.encodeToString(bytes, Base64.NO_WRAP);
+                data = "data:image/"+extension+";base64," + data;
+                promise.resolve(data);
+            }
+            else {
+                promise.reject(ERROR_UNABLE_TO_SNAPSHOT, "Unsupported result: "+result+". Try one of: file | base64 | data-uri");
             }
         }
         catch (Exception e) {
-            promise.reject(ERROR_UNABLE_TO_SNAPSHOT, "Failed to snapshot view tag "+tag);
+            promise.reject(ERROR_UNABLE_TO_SNAPSHOT, "Failed to capture view snapshot");
         }
         finally {
             if (os != null) {

ios/RNViewShot.m

@@ -28,69 +28,83 @@ RCT_EXPORT_METHOD(takeSnapshot:(nonnull NSNumber *)target
                   resolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject)
 {
-    [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-
-        // Get view
-        UIView *view;
-        view = viewRegistry[target];
-        if (!view) {
-            reject(RCTErrorUnspecified, [NSString stringWithFormat:@"No view found with reactTag: %@", target], nil);
-            return;
-        }
-
-        // Get options
-        CGSize size = [RCTConvert CGSize:options];
-        NSString *format = [RCTConvert NSString:options[@"format"] ?: @"png"];
-
-        // Capture image
-        if (size.width < 0.1 || size.height < 0.1) {
-            size = view.bounds.size;
-        }
-        UIGraphicsBeginImageContextWithOptions(size, NO, 0);
-        BOOL success = [view drawViewHierarchyInRect:(CGRect){CGPointZero, size} afterScreenUpdates:YES];
-        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
-        UIGraphicsEndImageContext();
-
-        if (!success || !image) {
-            reject(RCTErrorUnspecified, @"Failed to capture view snapshot.", nil);
-            return;
+  [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    
+    // Get view
+    UIView *view;
+    view = viewRegistry[target];
+    if (!view) {
+      reject(RCTErrorUnspecified, [NSString stringWithFormat:@"No view found with reactTag: %@", target], nil);
+      return;
+    }
+    
+    // Get options
+    CGSize size = [RCTConvert CGSize:options];
+    NSString *format = [RCTConvert NSString:options[@"format"] ?: @"png"];
+    NSString *result = [RCTConvert NSString:options[@"result"] ?: @"file"];
+    
+    // Capture image
+    if (size.width < 0.1 || size.height < 0.1) {
+      size = view.bounds.size;
+    }
+    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
+    BOOL success = [view drawViewHierarchyInRect:(CGRect){CGPointZero, size} afterScreenUpdates:YES];
+    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+    
+    if (!success || !image) {
+      reject(RCTErrorUnspecified, @"Failed to capture view snapshot", nil);
+      return;
+    }
+    
+    // Convert image to data (on a background thread)
+    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
+      
+      NSData *data;
+      if ([format isEqualToString:@"png"]) {
+        data = UIImagePNGRepresentation(image);
+      } else if ([format isEqualToString:@"jpeg"] || [format isEqualToString:@"jpg"]) {
+        CGFloat quality = [RCTConvert CGFloat:options[@"quality"] ?: @1];
+        data = UIImageJPEGRepresentation(image, quality);
+      } else {
+        reject(RCTErrorUnspecified, [NSString stringWithFormat:@"Unsupported image format: %@. Try one of: png | jpg | jpeg", format], nil);
+        return;
+      }
+      
+      NSError *error = nil;
+      NSString *res = nil;
+      if ([result isEqualToString:@"file"]) {
+        // Save to a temp file
+        NSString *tempFilePath = RCTTempFilePath(format, &error);
+        if (tempFilePath) {
+          if ([data writeToFile:tempFilePath options:(NSDataWritingOptions)0 error:&error]) {
+            res = tempFilePath;
+          }
         }
-
-        // Convert image to data (on a background thread)
-        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
-
-            NSData *data;
-            if ([format isEqualToString:@"png"]) {
-                data = UIImagePNGRepresentation(image);
-            } else if ([format isEqualToString:@"jpeg"] || [format isEqualToString:@"jpg"]) {
-                CGFloat quality = [RCTConvert CGFloat:options[@"quality"] ?: @1];
-                data = UIImageJPEGRepresentation(image, quality);
-            } else {
-                reject(RCTErrorUnspecified, [NSString stringWithFormat:@"Unsupported image format: %@", format], nil);
-                return;
-            }
-
-            NSError *error = nil;
-            if ([[options objectForKey:@"base64"] boolValue]) {
-                // Return as a base64'd string
-                NSString *dataString = [data base64EncodedStringWithOptions:0];
-                resolve(dataString);
-                return;
-            } else {
-                // Save to a temp file
-                NSString *tempFilePath = RCTTempFilePath(format, &error);
-                if (tempFilePath) {
-                    if ([data writeToFile:tempFilePath options:(NSDataWritingOptions)0 error:&error]) {
-                        resolve(tempFilePath);
-                        return;
-                    }
-                }
-            }
-
-            // If we reached here, something went wrong
-            reject(RCTErrorUnspecified, error.localizedDescription, error);
-        });
-    }];
+      }
+      else if ([result isEqualToString:@"base64"]) {
+        // Return as a base64 raw string
+        res = [data base64EncodedStringWithOptions: NSDataBase64Encoding64CharacterLineLength];
+      }
+      else if ([result isEqualToString:@"data-uri"]) {
+        // Return as a base64 data uri string
+        NSString *base64 = [data base64EncodedStringWithOptions: NSDataBase64Encoding64CharacterLineLength];
+        res = [NSString stringWithFormat:@"data:image/%@;base64,%@", format, base64];
+      }
+      else {
+        reject(RCTErrorUnspecified, [NSString stringWithFormat:@"Unsupported result: %@. Try one of: file | base64 | data-uri", result], nil);
+        return;
+      }
+      if (res != nil) {
+        resolve(res);
+        return;
+      }
+      
+      // If we reached here, something went wrong
+      if (error != nil) reject(RCTErrorUnspecified, error.localizedDescription, error);
+      else reject(RCTErrorUnspecified, @"viewshot unknown error", nil);
+    });
+  }];
 }
 
 

ios/RNViewShot.xcodeproj/project.pbxproj

@@ -24,8 +24,8 @@
 
 /* Begin PBXFileReference section */
 		134814201AA4EA6300B7C361 /* libRNViewShot.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRNViewShot.a; sourceTree = BUILT_PRODUCTS_DIR; };
-		B3E7B5881CC2AC0600A0062D /* RNViewShot.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNViewShot.h; sourceTree = "<group>"; };
-		B3E7B5891CC2AC0600A0062D /* RNViewShot.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNViewShot.m; sourceTree = "<group>"; };
+		B3E7B5881CC2AC0600A0062D /* RNViewShot.h */ = {isa = PBXFileReference; fileEncoding = 4; indentWidth = 2; lastKnownFileType = sourcecode.c.h; path = RNViewShot.h; sourceTree = "<group>"; tabWidth = 2; };
+		B3E7B5891CC2AC0600A0062D /* RNViewShot.m */ = {isa = PBXFileReference; fileEncoding = 4; indentWidth = 2; lastKnownFileType = sourcecode.c.objc; path = RNViewShot.m; sourceTree = "<group>"; tabWidth = 2; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -54,7 +54,9 @@
 				B3E7B5891CC2AC0600A0062D /* RNViewShot.m */,
 				134814211AA4EA7D00B7C361 /* Products */,
 			);
+			indentWidth = 2;
 			sourceTree = "<group>";
+			tabWidth = 2;
 		};
 /* End PBXGroup section */
 
@@ -197,7 +199,7 @@
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				HEADER_SEARCH_PATHS = (
-				"$(inherited)",
+					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../../React/**",
 					"$(SRCROOT)/../../react-native/React/**",