Merge pull request #144 from callstack/feature/retyui/base64

feature: Add base64 output
callstack · Feb 25, 2024 · 764f6ec · 764f6ec
2 parents c59e226 + eeec3fe
commit 764f6ec
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -36,47 +36,38 @@ import ImageEditor from '@react-native-community/image-editor';
 
 Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the promise will be rejected.
 
-If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the URI returned in the promise will point to the image in the cache path. Remember to delete the cropped image from the cache path when you are done with it.
+If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the [`CropResult`](#result-cropresult) returned in the promise will point to the image in the cache path. ⚠️ Remember to delete the cropped image from the cache path when you are done with it.
 
 ```ts
-ImageEditor.cropImage(uri, cropData).then(
-  ({
-    uri, // the path to the image file (example: 'file:///data/user/0/.../image.jpg')
-    path, // the URI of the image (example: '/data/user/0/.../image.jpg')
-    name, // the name of the image file. (example: 'image.jpg')
-    width, // the width of the image in pixels
-    height, // height of the image in pixels
-    size, // the size of the image in bytes
-  }) => {
-    console.log('Cropped image uri:', uri);
-    // WEB has different response:
-    // - `uri`  is the base64 string (example `data:image/jpeg;base64,/4AAQ...AQABAA`)
-    // - `path` is the blob URL      (example `blob:https://example.com/43ff7a16...e46b1`)
-  }
-);
+ImageEditor.cropImage(uri, cropData).then((result) => {
+  console.log('Cropped image uri:', result.uri);
+});
 ```
 
 ### `cropData: ImageCropData`
 
-| Property      | Required | Description                                                                                                                                                                                                                                                                                                                                                             |
-| ------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `offset`      | Yes      | The top-left corner of the cropped image, specified in the original image's coordinate space                                                                                                                                                                                                                                                                            |
-| `size`        | Yes      | Size (dimensions) of the cropped image                                                                                                                                                                                                                                                                                                                                  |
-| `displaySize` | No       | Size to which you want to scale the cropped image                                                                                                                                                                                                                                                                                                                       |
-| `resizeMode`  | No       | Resizing mode to use when scaling the image (iOS only, Android resize mode is always `'cover'`, Web - no support) **Default value**: `'cover'`                                                                                                                                                                                                                          |
-| `quality`     | No       | The quality of the resulting image, expressed as a value from `0.0` to `1.0`. <br/>The value `0.0` represents the maximum compression (or lowest quality) while the value `1.0` represents the least compression (or best quality).<br/>iOS supports only `JPEG` format, while Android/Web supports both `JPEG`, `WEBP` and `PNG` formats.<br/>**Default value**: `0.9` |
-| `format`      | No       | The format of the resulting image, possible values are `jpeg`, `png`, `webp`. <br/> **Default value**: based on the provided image; if value determination is not possible, `jpeg` will be used as a fallback. <br/> `webp` isn't supported by iOS.                                                                                                                     |
-
-```ts
-cropData: ImageCropData = {
-  offset: { x: number, y: number },
-  size: { width: number, height: number },
-  displaySize: { width: number, height: number },
-  resizeMode: 'contain' | 'cover' | 'stretch',
-  quality: number, // 0...1
-  format: 'jpeg' | 'png' | 'webp',
-};
-```
+| Name                            | Type                                            | Description                                                                                                                                                                                                  |
+| ------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `offset`                        | `{ x: number, y: number }`                      | The top-left corner of the cropped image, specified in the original image's coordinate space                                                                                                                 |
+| `size`                          | `{ width: number, height: number }`             | Size (dimensions) of the cropped image                                                                                                                                                                       |
+| `displaySize`<br>_(optional)_   | `{ width: number, height: number }`             | Size to which you want to scale the cropped image                                                                                                                                                            |
+| `resizeMode`<br>_(optional)_    | `'contain' \| 'cover' \| 'stretch' \| 'center'` | Resizing mode to use when scaling the image (iOS only, Android resize mode is always `'cover'`, Web - no support) <br/>**Default value**: `'cover'`                                                          |
+| `quality`<br>_(optional)_       | `number`                                        | A value in range `0.0` - `1.0` specifying compression level of the result image. `1` means no compression (highest quality) and `0` the highest compression (lowest quality) <br/>**Default value**: `0.9`   |
+| `format`<br>_(optional)_        | `'jpeg' \| 'png' \| 'webp'`                     | The format of the resulting image.<br/> **Default value**: based on the provided image;<br>if value determination is not possible, `'jpeg'` will be used as a fallback.<br/>`'webp'` isn't supported by iOS. |
+| `includeBase64`<br>_(optional)_ | `boolean`                                       | Indicates if Base64 formatted picture data should also be included in the [`CropResult`](#result-cropresult). <br/>**Default value**: `false`                                                                |
+
+### `result: CropResult`
+
+| Name                     | Type     | Description                                                                                                                                                                                    |
+| ------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uri`                    | `string` | The path to the image file (example: `'file:///data/user/0/.../image.jpg'`)<br> **WEB:** `uri` is the data URI string (example `'data:image/jpeg;base64,/4AAQ...AQABAA'`)                      |
+| `path`                   | `string` | The URI of the image (example: `'/data/user/0/.../image.jpg'`)<br> **WEB:** `path` is the blob URL (example `'blob:https://example.com/43ff7a16...e46b1'`)                                     |
+| `name`                   | `string` | The name of the image file. (example: `'image.jpg'`)                                                                                                                                           |
+| `width`                  | `number` | The width of the image in pixels                                                                                                                                                               |
+| `height`                 | `number` | Height of the image in pixels                                                                                                                                                                  |
+| `size`                   | `number` | The size of the image in bytes                                                                                                                                                                 |
+| `type`                   | `string` | The MIME type of the image (`'image/jpeg'`, `'image/png'`, `'image/webp'`)                                                                                                                     |
+| `base64`<br>_(optional)_ | `string` | The base64-encoded image data example: `'/9j/4AAQSkZJRgABAQAAAQABAAD'`<br>if you need data URI as the `source` for an `Image` element for example, you can use `data:${type};base64,${base64}` |
 
 For more advanced usage check our [example app](/example/src/App.tsx).
 

diff --git a/android/src/main/java/com/reactnativecommunity/imageeditor/ImageEditorModuleImpl.kt b/android/src/main/java/com/reactnativecommunity/imageeditor/ImageEditorModuleImpl.kt
@@ -19,7 +19,7 @@ import android.net.Uri
 import android.os.Build
 import android.provider.MediaStore
 import android.text.TextUtils
-import android.util.Base64 as AndroidUtilBase64
+import android.util.Base64
 import androidx.exifinterface.media.ExifInterface
 import com.facebook.common.logging.FLog
 import com.facebook.infer.annotation.Assertions
@@ -32,11 +32,11 @@ import com.facebook.react.bridge.WritableMap
 import com.facebook.react.common.ReactConstants
 import java.io.ByteArrayInputStream
 import java.io.File
+import java.io.FileInputStream
 import java.io.FileOutputStream
 import java.io.IOException
 import java.io.InputStream
 import java.net.URL
-import java.util.Base64
 import kotlin.math.roundToInt
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -102,6 +102,8 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
         val format = if (options.hasKey("format")) options.getString("format") else null
         val offset = if (options.hasKey("offset")) options.getMap("offset") else null
         val size = if (options.hasKey("size")) options.getMap("size") else null
+        val includeBase64 =
+            if (options.hasKey("includeBase64")) options.getBoolean("includeBase64") else false
         val quality =
             if (options.hasKey("quality")) (options.getDouble("quality") * 100).toInt() else 90
         if (
@@ -164,7 +166,7 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
                 if (mimeType == MimeType.JPEG) {
                     copyExif(reactContext, Uri.parse(uri), tempFile)
                 }
-                promise.resolve(getResultMap(tempFile, cropped))
+                promise.resolve(getResultMap(tempFile, cropped, mimeType, includeBase64))
             } catch (e: Exception) {
                 promise.reject(e)
             }
@@ -319,11 +321,7 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
     private fun openBitmapInputStream(uri: String): InputStream? {
         return if (uri.startsWith("data:")) {
             val src = uri.substring(uri.indexOf(",") + 1)
-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
-                ByteArrayInputStream(Base64.getMimeDecoder().decode(src))
-            } else {
-                ByteArrayInputStream(AndroidUtilBase64.decode(src, AndroidUtilBase64.DEFAULT))
-            }
+            ByteArrayInputStream(Base64.decode(src, Base64.DEFAULT))
         } else if (isLocalUri(uri)) {
             reactContext.contentResolver.openInputStream(Uri.parse(uri))
         } else {
@@ -439,17 +437,36 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
             )
 
         // Utils
-        private fun getResultMap(resizedImage: File, image: Bitmap): WritableMap {
+        private fun getResultMap(
+            resizedImage: File,
+            image: Bitmap,
+            mimeType: String,
+            includeBase64: Boolean
+        ): WritableMap {
             val response = Arguments.createMap()
             response.putString("path", resizedImage.absolutePath)
             response.putString("uri", Uri.fromFile(resizedImage).toString())
             response.putString("name", resizedImage.name)
             response.putInt("size", resizedImage.length().toInt())
             response.putInt("width", image.width)
             response.putInt("height", image.height)
+            response.putString("type", mimeType)
+
+            if (includeBase64) {
+                response.putString("base64", getBase64String(resizedImage))
+            }
+
             return response
         }
 
+        private fun getBase64String(file: File): String {
+            val inputStream = FileInputStream(file)
+            val buffer = ByteArray(file.length().toInt())
+            inputStream.read(buffer)
+            inputStream.close()
+            return Base64.encodeToString(buffer, Base64.NO_WRAP)
+        }
+
         private fun getMimeType(outOptions: BitmapFactory.Options, format: String?): String {
             val mimeType =
                 when (format) {

diff --git a/ios/RNCImageEditor.mm b/ios/RNCImageEditor.mm
@@ -35,6 +35,7 @@
     RCTResizeMode resizeMode;
     CGFloat quality;
     NSString *format;
+    BOOL includeBase64;
 };
 
 @implementation RNCImageEditor
@@ -52,14 +53,16 @@ - (Params)adaptParamsWithFormat:(id)format
                    displayWidth:(id)displayWidth
                   displayHeight:(id)displayHeight
                         quality:(id)quality
+                  includeBase64:(id)includeBase64
 {
     return Params{
         .offset = {[RCTConvert double:offsetX], [RCTConvert double:offsetY]},
         .size = {[RCTConvert double:width], [RCTConvert double:height]},
         .displaySize = {[RCTConvert double:displayWidth], [RCTConvert double:displayHeight]},
         .resizeMode = [RCTConvert RCTResizeMode:resizeMode ?: @(DEFAULT_RESIZE_MODE)],
         .quality = [RCTConvert CGFloat:quality],
-        .format = [RCTConvert NSString:format]
+        .format = [RCTConvert NSString:format],
+        .includeBase64 = [RCTConvert BOOL:includeBase64]
     };
 }
 
@@ -89,7 +92,8 @@ - (void) cropImage:(NSString *)uri
         resizeMode:data.resizeMode()
         displayWidth:@(data.displaySize().has_value() ? data.displaySize()->width() : DEFAULT_DISPLAY_SIZE)
         displayHeight:@(data.displaySize().has_value() ? data.displaySize()->height() : DEFAULT_DISPLAY_SIZE)
-        quality:@(data.quality().has_value() ? *data.quality() : DEFAULT_COMPRESSION_QUALITY)];
+        quality:@(data.quality().has_value() ? *data.quality() : DEFAULT_COMPRESSION_QUALITY)
+        includeBase64:@(data.includeBase64().has_value() ? *data.includeBase64() : NO)];
 #else
 RCT_EXPORT_METHOD(cropImage:(NSURLRequest *)imageRequest
                   cropData:(NSDictionary *)cropData
@@ -104,7 +108,9 @@ - (void) cropImage:(NSString *)uri
     resizeMode:cropData[@"resizeMode"]
     displayWidth:cropData[@"displaySize"] ? cropData[@"displaySize"][@"width"] : @(DEFAULT_DISPLAY_SIZE)
     displayHeight:cropData[@"displaySize"] ? cropData[@"displaySize"][@"height"] : @(DEFAULT_DISPLAY_SIZE)
-    quality:cropData[@"quality"] ? cropData[@"quality"] : @(DEFAULT_COMPRESSION_QUALITY)];
+    quality:cropData[@"quality"] ? cropData[@"quality"] : @(DEFAULT_COMPRESSION_QUALITY)
+    includeBase64:cropData[@"includeBase64"]
+  ];
 
 #endif
   NSURL *url = [imageRequest URL];
@@ -139,14 +145,15 @@ - (void) cropImage:(NSString *)uri
     }
 
     // Store image
+    NSString *type = @"image/jpeg";
     NSString *path = NULL;
     NSData *imageData = NULL;
 
     if([extension isEqualToString:@"png"]){
+      type = @"image/png";
       imageData = UIImagePNGRepresentation(croppedImage);
       path = [RNCFileSystem generatePathInDirectory:[[RNCFileSystem cacheDirectoryPath] stringByAppendingPathComponent:@"ReactNative_cropped_image_"] withExtension:@".png"];
-    }
-    else{
+    } else{
       imageData = UIImageJPEGRepresentation(croppedImage, params.quality);
       path = [RNCFileSystem generatePathInDirectory:[[RNCFileSystem cacheDirectoryPath] stringByAppendingPathComponent:@"ReactNative_cropped_image_"] withExtension:@".jpg"];
     }
@@ -164,14 +171,18 @@ - (void) cropImage:(NSString *)uri
     NSError *attributesError = nil;
     NSDictionary *fileAttributes = [[NSFileManager defaultManager] attributesOfItemAtPath:path error:&attributesError];
     NSNumber *fileSize = fileAttributes == nil ? 0 : [fileAttributes objectForKey:NSFileSize];
-    NSDictionary *response = @{
-       @"path": path,
-       @"uri": uri,
-       @"name": filename,
-       @"size": fileSize ?: @(0),
-       @"width": @(croppedImage.size.width),
-       @"height": @(croppedImage.size.height),
-    };
+
+    NSMutableDictionary *response = [[NSMutableDictionary alloc] init];
+    response[@"path"] = path;
+    response[@"uri"] = uri;
+    response[@"name"] = filename;
+    response[@"type"] = type;
+    response[@"size"] = fileSize ?: @(0);
+    response[@"width"] = @(croppedImage.size.width);
+    response[@"height"] = @(croppedImage.size.height);
+    if (params.includeBase64) {
+      response[@"base64"] = [imageData base64EncodedStringWithOptions:0];
+    }
 
     resolve(response);
   }];

diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "!android/gradlew",
     "!android/gradlew.bat",
     "!android/local.properties",
+    "!**/__typetests__",
     "!**/__tests__",
     "!**/__fixtures__",
     "!**/__mocks__",

diff --git a/src/NativeRNCImageEditor.ts b/src/NativeRNCImageEditor.ts
@@ -49,6 +49,11 @@ export interface Spec extends TurboModule {
        * (Optional) The format of the resulting image. Default auto-detection based on given image
        */
       format?: string;
+
+      /**
+       * (Optional) Indicates if Base64 formatted picture data should also be included in the result.
+       */
+      includeBase64?: boolean;
     }
   ): Promise<{
     /**
@@ -75,6 +80,16 @@ export interface Spec extends TurboModule {
      * The size of the image in bytes
      */
     size: Int32;
+
+    /**
+     * MIME type of the image (example: 'image/jpeg')
+     */
+    type: string;
+
+    /**
+     * The base64 string of the image if the `base64` param is true
+     */
+    base64?: string;
   }>;
 }
 

diff --git a/src/__typetests__/index.ts b/src/__typetests__/index.ts
@@ -0,0 +1,35 @@
+/* eslint-disable */
+import ImageEditorNative from '../index.ts';
+
+const requiredParams = {
+  size: { width: 100, height: 100 },
+  offset: { x: 0, y: 0 },
+};
+
+ImageEditorNative.cropImage('<test>', {
+  ...requiredParams,
+  includeBase64: true,
+  // ^^^: if `true` then result has `base64` property as string
+}).then((e) => {
+  const a: string = e.base64;
+  // @ts-expect-error - base64 is a string
+  const b: number = e.base64;
+});
+
+ImageEditorNative.cropImage('<test>', {
+  ...requiredParams,
+  includeBase64: false,
+  // ^^^: if `false` then result doesn't have `base64` property
+}).then((e) => {
+  // @ts-expect-error - base64 doesn't exist
+  const a: string = e.base64;
+});
+
+ImageEditorNative.cropImage('<test>', {
+  ...requiredParams,
+  // includeBase64: false,
+  // ^^^: if `undefined` then result doesn't have `base64` property
+}).then((e) => {
+  // @ts-expect-error - base64 doesn't exist
+  const a: string = e.base64;
+});