Fix bitmap crop/scaling for android

Author: Jonas Thuresson

android/src/main/java/com/reactnativecommunity/imageeditor/ImageEditorModuleImpl.kt

@@ -206,10 +206,10 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
                     BitmapRegionDecoder.newInstance(it)
                 } else {
                     @Suppress("DEPRECATION") BitmapRegionDecoder.newInstance(it, false)
-                }
+                } ?: throw Error("Could not create bitmap decoder. Uri: $uri")
 
-            val imageHeight: Int = decoder!!.height
-            val imageWidth: Int = decoder!!.width
+            val imageHeight: Int = decoder.height
+            val imageWidth: Int = decoder.width
             val orientation = getOrientation(reactContext, Uri.parse(uri))
 
             val (left, top) =
@@ -229,9 +229,9 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
 
             return@use try {
                 val rect = Rect(left, top, right, bottom)
-                decoder!!.decodeRegion(rect, outOptions)
+                decoder.decodeRegion(rect, outOptions)
             } finally {
-                decoder!!.recycle()
+                decoder.recycle()
             }
         }
     }
@@ -262,25 +262,22 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
     ): Bitmap? {
         Assertions.assertNotNull(outOptions)
 
-        // Loading large bitmaps efficiently:
-        // http://developer.android.com/training/displaying-bitmaps/load-bitmap.html
-
-        // This uses scaling mode COVER
-
-        // Where would the crop rect end up within the scaled bitmap?
-
-        val bitmap =
-            openBitmapInputStream(uri, headers)?.use {
-                // This can use significantly less memory than decoding the full-resolution bitmap
-                BitmapFactory.decodeStream(it, null, outOptions)
-            } ?: return null
+      return openBitmapInputStream(uri, headers)?.use {
+        // Efficiently crops image without loading full resolution into memory
+        // https://developer.android.com/reference/android/graphics/BitmapRegionDecoder.html
+        val decoder =
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            BitmapRegionDecoder.newInstance(it)
+          } else {
+            @Suppress("DEPRECATION") BitmapRegionDecoder.newInstance(it, false)
+          } ?: throw Error("Could not create bitmap decoder. Uri: $uri")
 
         val orientation = getOrientation(reactContext, Uri.parse(uri))
         val (x, y) =
             when (orientation) {
-                90 -> yPos to bitmap.height - rectWidth - xPos
-                270 -> bitmap.width - rectHeight - yPos to xPos
-                180 -> bitmap.width - rectWidth - xPos to bitmap.height - rectHeight - yPos
+                90 -> yPos to decoder.height - rectWidth - xPos
+                270 -> decoder.width - rectHeight - yPos to xPos
+                180 -> decoder.width - rectWidth - xPos to decoder.height - rectHeight - yPos
                 else -> xPos to yPos
             }
 
@@ -323,7 +320,11 @@ class ImageEditorModuleImpl(private val reactContext: ReactApplicationContext) {
         val scaleMatrix = Matrix().apply { setScale(cropScale, cropScale) }
         val filter = true
 
+        val rect = Rect(0, 0, decoder.width, decoder.height)
+        val bitmap =decoder.decodeRegion(rect, outOptions)
+        
         return Bitmap.createBitmap(bitmap, cropX, cropY, cropWidth, cropHeight, scaleMatrix, filter)
+      }
     }
 
     private fun openBitmapInputStream(uri: String, headers: HashMap<String, Any?>?): InputStream? {

example/ios/Podfile.lock

@@ -824,6 +824,22 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-slider (4.5.0):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-NativeModulesApple (0.72.6):
     - React-callinvoker
     - React-Core
@@ -985,6 +1001,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - "react-native-image-editor (from `../node_modules/@react-native-community/image-editor`)"
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -1060,6 +1077,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   react-native-image-editor:
     :path: "../node_modules/@react-native-community/image-editor"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
   React-perflogger:
@@ -1130,11 +1149,12 @@ SPEC CHECKSUMS:
   React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
   react-native-image-editor: 6491eca6c084de724a9a144056323cb00848b68c
+  react-native-slider: 69ccddffd41798b325247b9c4c09a0927e3b7cec
   React-NativeModulesApple: 63505fb94b71e2469cab35bdaf36cca813cb5bfd
   React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3
   React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485
   React-RCTAnimation: c8bbaab62be5817d2a31c36d5f2571e3f7dcf099
-  React-RCTAppDelegate: 100a4f479c664e4f63d4cfd3ff8acbd3915e31e7
+  React-RCTAppDelegate: 16245b0c3a216dd600db53209812f8d470643a57
   React-RCTBlob: 86ab788db3fcc1af0d186a6625e7d0956ffeea5b
   React-RCTFabric: 87e15f0ad21f7bf2642d4e78afaf162d349eb221
   React-RCTImage: 670a3486b532292649b1aef3ffddd0b495a5cee4
@@ -1156,4 +1176,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: c464aabec59351f1e87d676c093bc6f524e21681
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.14.3

example/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@react-native-community/image-editor": "link:..",
+    "@react-native-community/slider": "^4.5.0",
     "react": "18.2.0",
     "react-native": "0.72.6"
   },

example/src/SquareImageCropper.tsx

@@ -8,6 +8,7 @@ import {
   SafeAreaView,
 } from 'react-native';
 import ImageEditor from '@react-native-community/image-editor';
+import Slider from '@react-native-community/slider';
 
 import type { LayoutChangeEvent } from 'react-native';
 import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
@@ -19,6 +20,7 @@ interface State {
   croppedImageURI: string | null;
   cropError: Error | null;
   measuredSize: ImageSize | null;
+  cropScale: number;
 }
 interface Props {
   // noop
@@ -41,6 +43,7 @@ export class SquareImageCropper extends Component<Props, State> {
       measuredSize: null,
       croppedImageURI: null,
       cropError: null,
+      cropScale: 1,
     };
   }
 
@@ -89,6 +92,17 @@ export class SquareImageCropper extends Component<Props, State> {
           style={[styles.imageCropper, measuredSize]}
           onTransformDataChange={this._onTransformDataChange}
         />
+        <View style={styles.scaleSliderContainer}>
+          <Text>Scale {this.state.cropScale.toFixed(2)}</Text>
+          <Slider
+            style={styles.scaleSlider}
+            minimumValue={0}
+            maximumValue={1}
+            onValueChange={(cropScale) => this.setState({ cropScale })}
+            value={this.state.cropScale}
+          />
+        </View>
+
         <TouchableHighlight
           accessibilityRole="button"
           style={styles.cropButtonTouchable}
@@ -131,9 +145,20 @@ export class SquareImageCropper extends Component<Props, State> {
       if (!this._transformData) {
         return;
       }
+      const displaySize =
+        this.state.cropScale !== 1
+          ? {
+              width: this._transformData?.size.width * this.state.cropScale,
+              height: this._transformData?.size.height * this.state.cropScale,
+            }
+          : undefined;
+      const cropData: ImageCropData = {
+        ...this._transformData,
+        displaySize,
+      };
       const { uri } = await ImageEditor.cropImage(
         this.state.photo.uri,
-        this._transformData
+        cropData
       );
       if (uri) {
         this.setState({ croppedImageURI: uri });
@@ -146,7 +171,7 @@ export class SquareImageCropper extends Component<Props, State> {
   };
 
   _reset = () => {
-    this.setState({ croppedImageURI: null, cropError: null });
+    this.setState({ croppedImageURI: null, cropError: null, cropScale: 1 });
   };
 }
 
@@ -186,4 +211,12 @@ const styles = StyleSheet.create({
     fontSize: 16,
     marginBottom: 10,
   },
+  scaleSlider: {
+    width: '100%',
+  },
+  scaleSliderContainer: {
+    width: '80%',
+    alignSelf: 'center',
+    alignItems: 'center',
+  },
 });

example/yarn.lock

@@ -1687,6 +1687,11 @@
   version "0.0.0"
   uid ""
 
+"@react-native-community/slider@^4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.5.0.tgz#5c55488ee30060cd87100fb746b9d8655dbab04e"
+  integrity sha512-pyUvNTvu5IfCI5abzqRfO/dd3A009RC66RXZE6t0gyOwI/j0QDlq9VZRv3rjkpuIvNTnsYj+m5BHlh0DkSYUyA==
+
 "@react-native/assets-registry@^0.72.0":
   version "0.72.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.72.0.tgz#c82a76a1d86ec0c3907be76f7faf97a32bbed05d"