fix: restore image transforms after upgrades

Author: mrousavy

packages/react-native-nitro-image/android/src/main/java/com/margelo/nitro/image/HybridImage.kt

@@ -4,6 +4,7 @@ import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Matrix
 import android.graphics.Rect
+import android.graphics.RectF
 import android.os.Build
 import androidx.annotation.Keep
 import androidx.core.graphics.createBitmap
@@ -22,6 +23,18 @@ import com.margelo.nitro.image.extensions.toCpuAccessible
 import com.margelo.nitro.image.extensions.toMutable
 import java.io.File
 import java.nio.ByteBuffer
+import kotlin.math.abs
+import kotlin.math.ceil
+import kotlin.math.round
+
+private fun roundedUpPixelDimension(value: Float): Int {
+    val rounded = round(value)
+    return if (abs(value - rounded) < 0.0001f) {
+        rounded.toInt()
+    } else {
+        ceil(value).toInt()
+    }.coerceAtLeast(1)
+}
 
 @Suppress("ConvertSecondaryConstructorToPrimary")
 @Keep
@@ -54,7 +67,7 @@ class HybridImage: HybridImageSpec {
         } else {
             // Copy the data into a CPU buffer (ByteBuffer)
             var bitmap = bitmap
-            if (bitmap.isGPU) {
+            if (bitmap.isGPU || bitmap.pixelFormat == PixelFormat.UNKNOWN) {
                 // If this is a GPU-based bitmap (but we cannot use GPU), copy it to a CPU Bitmap first
                 bitmap = bitmap.copy(Bitmap.Config.ARGB_8888, false)
             }
@@ -84,10 +97,19 @@ class HybridImage: HybridImageSpec {
         // 1. Make sure the Bitmap we want to draw is drawable (HARDWARE isn't)
         val source = bitmap.toCpuAccessible()
         // 2. Create a rotation Matrix
-        val matrix = Matrix()
-        matrix.setRotate(degrees.toFloat(), source.width / 2f, source.height / 2f)
-        // 3. Create a new blank Bitmap as our output
-        val destination = createBitmap(bitmap.width, bitmap.height)
+        val matrix = Matrix().apply {
+            setRotate(degrees.toFloat())
+        }
+        val sourceRect = RectF(0f, 0f, source.width.toFloat(), source.height.toFloat())
+        val rotatedRect = RectF()
+        matrix.mapRect(rotatedRect, sourceRect)
+        // 3. Create a new blank Bitmap as our output, large enough to contain the rotated source.
+        val destination = createBitmap(
+            roundedUpPixelDimension(rotatedRect.width()),
+            roundedUpPixelDimension(rotatedRect.height()),
+            source.config ?: Bitmap.Config.ARGB_8888
+        )
+        matrix.postTranslate(-rotatedRect.left, -rotatedRect.top)
         // 4. Draw the Bitmap to our destination
         Canvas(destination).apply {
             drawBitmap(source, matrix, null)
@@ -201,8 +223,8 @@ class HybridImage: HybridImageSpec {
             // 3. Prepare the Bitmap we want to draw into our Canvas
             val rect = Rect(x.toInt(),
                 y.toInt(),
-                width.toInt(),
-                height.toInt())
+                (x + width).toInt(),
+                (y + height).toInt())
 
             // 4. Make sure we can draw the Bitmap (HARDWARE isn't CPU accessible)
             val drawable = newImage.bitmap.toCpuAccessible()

packages/react-native-nitro-image/ios/HybridImageFactory.swift

@@ -17,6 +17,7 @@ class HybridImageFactory: HybridImageFactorySpec {
     let size = CGSize(width: width, height: height)
     let format = UIGraphicsImageRendererFormat()
     format.opaque = !enableAlpha
+    format.scale = 1
     // 2. Create a new UIImage
     let uiImage = UIGraphicsImageRenderer(size: size, format: format).image { canvas in
       if let fill {

packages/react-native-nitro-image/ios/Public/NativeImage.swift

@@ -8,6 +8,14 @@
 import UIKit
 import NitroModules
 
+private func roundedUpPixelDimension(_ value: CGFloat) -> CGFloat {
+  let rounded = round(value)
+  if abs(value - rounded) < 0.0001 {
+    return rounded
+  }
+  return ceil(value)
+}
+
 /**
  * A protocol that represents a native image.
  * This can be used to downcast from `HybridImageSpec`
@@ -63,20 +71,25 @@ public extension NativeImage {
       return HybridImage(uiImage: rotated)
     } else {
       // Slow path: we actually rotate using UIGraphicsImageRenderer
-      let renderer = UIGraphicsImageRenderer(size: uiImage.size)
+      let radians = degrees * .pi / 180
+      let sourceSize = uiImage.size
+      let sourceRect = CGRect(origin: .zero, size: sourceSize)
+      let rotatedRect = sourceRect.applying(CGAffineTransform(rotationAngle: radians))
+      let outputSize = CGSize(width: roundedUpPixelDimension(abs(rotatedRect.width)),
+                              height: roundedUpPixelDimension(abs(rotatedRect.height)))
+      let format = UIGraphicsImageRendererFormat()
+      format.scale = 1
+      let renderer = UIGraphicsImageRenderer(size: outputSize, format: format)
       let rotatedImage = renderer.image { context in
-        let width = uiImage.size.width
-        let height = uiImage.size.height
         // 1. Move to the center of the image so our origin is the center
-        context.cgContext.translateBy(x: width / 2, y: height / 2)
+        context.cgContext.translateBy(x: outputSize.width / 2, y: outputSize.height / 2)
         // 2. Rotate by the given radians
-        let radians = degrees * .pi / 180
         context.cgContext.rotate(by: radians)
         // 3. Draw the Image offset by half the frame so we counter our center origin from step 1.
-        let rect = CGRect(x: -(width / 2),
-                          y: -(height / 2),
-                          width: width,
-                          height: height)
+        let rect = CGRect(x: -(sourceSize.width / 2),
+                          y: -(sourceSize.height / 2),
+                          width: sourceSize.width,
+                          height: sourceSize.height)
         uiImage.draw(in: rect)
       }
       return HybridImage(uiImage: rotatedImage)
@@ -97,7 +110,9 @@ public extension NativeImage {
     }
     let targetSize = CGSize(width: width, height: height)
 
-    let renderer = UIGraphicsImageRenderer(size: targetSize)
+    let format = UIGraphicsImageRendererFormat()
+    format.scale = 1
+    let renderer = UIGraphicsImageRenderer(size: targetSize, format: format)
     let resizedImage = renderer.image { context in
       let targetRect = CGRect(origin: .zero, size: targetSize)
       uiImage.draw(in: targetRect)
@@ -124,12 +139,17 @@ public extension NativeImage {
       throw RuntimeError.error(withMessage: "This image does not have an underlying .cgImage!")
     }
 
-    let targetRect = CGRect(origin: CGPoint(x: startX, y: startY),
-                            size: CGSize(width: uiImage.size.width, height: uiImage.size.height))
+    let scale = uiImage.scale
+    let targetRect = CGRect(x: startX * scale,
+                            y: startY * scale,
+                            width: targetWidth * scale,
+                            height: targetHeight * scale).integral
     guard let croppedCgImage = cgImage.cropping(to: targetRect) else {
       throw RuntimeError.error(withMessage: "Failed to crop CGImage to \(targetRect)!")
     }
-    let croppedUiImage = UIImage(cgImage: croppedCgImage)
+    let croppedUiImage = UIImage(cgImage: croppedCgImage,
+                                 scale: scale,
+                                 orientation: uiImage.imageOrientation)
     return HybridImage(uiImage: croppedUiImage)
   }