Merge pull request #67 from ltatarev/main

Add support for `colorMatrix` prop
candlefinance · Nov 6, 2024 · 6a404c3 · 6a404c3
2 parents 1b00e5e + 6e5e17d
commit 6a404c3
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ await prefetch(['https://picsum.photos/200/200?random=0'])
 | resizeMode                | string                 | contain                  | The resize mode of the image                                                                         |
 | thumbhash                 | string                 |                          | The thumbhash of the image as a base64 encoded string to show while loading (Android not tested)     |
 | blurhash                  | string                 |                          | The blurhash of the image to show while loading (iOS only)                                           |
-| showActivityIndicator     | boolean                | false (iOS only)         | Whether to show the UIActivityIndicatorView indicator when the image is loading   
+| showActivityIndicator     | boolean                | false (iOS only)         | Whether to show the UIActivityIndicatorView indicator when the image is loading
 | activityColor             | ColorValue             | undefined (iOS only)     | Activity indicator color. Changed default activity indicator color. Only hex supported     |
 | base64Placeholder         | string                 |                          | The base64 encoded placeholder image to show while the image is loading                              |
 | cachePolicy               | string                 | memory                   | The cache policy of the image                                                                        |
@@ -97,6 +97,7 @@ await prefetch(['https://picsum.photos/200/200?random=0'])
 | onError                   | function               |                          | The function to call when an error occurs. The error is passed as the first argument of the function |
 | onSuccess                 | function               |                          | The function to call when the image is successfully loaded                                           |
 | grayscale                 | number                 | 0                        | Filter or transformation that converts the image into shades of gray (0-1).                          |
+| colorMatrix               | number[][]             |                          | Color matrix that is applied to image                                                                |
 | ignoreQueryParamsForCacheKey | boolean | false | Ignore URL query parameters in cache keys |
 | allowHardware             | boolean                | true                     | Allow hardware rendering (Android only)                                                              |
 | headers                   | Record<string, string> | undefined                | Pass in headers                                                                                      |

diff --git a/android/src/main/java/com/candlefinance/fasterimage/FasterImageViewManager.kt b/android/src/main/java/com/candlefinance/fasterimage/FasterImageViewManager.kt
@@ -186,16 +186,33 @@ class FasterImageViewManager : SimpleViewManager<AppCompatImageView>() {
             .getJSModule(RCTEventEmitter::class.java)
             .receiveEvent(view.id, "onSuccess", event)
 
-          if (grayscale == 0.0) {
-            view.setImageDrawable(result)
-          } else {
+          if (options.hasKey("colorMatrix")) {
+            val colorMatrixDrawable = result.mutate()
+            val colorMatrixArray = options.getArray("colorMatrix")
+            if (colorMatrixArray != null && colorMatrixArray.size() == 4 && (0 until colorMatrixArray.size()).all { colorMatrixArray.getArray(it)?.size() == 5 }) {
+              val flattenedMatrix = FloatArray(20)
+              for (i in 0 until 4) {
+                  val row = colorMatrixArray.getArray(i)
+                  if (row != null) {
+                      for (j in 0 until 5) {
+                          flattenedMatrix[i * 5 + j] = row.getDouble(j).toFloat()
+                      }
+                  }
+              }
+              val colorMatrix = ColorMatrix(flattenedMatrix)
+              colorMatrixDrawable.colorFilter = ColorMatrixColorFilter(colorMatrix)
+              view.setImageDrawable(colorMatrixDrawable)
+            }
+          } else if (grayscale > 0.0) {
             val grayscaleDrawable = result.mutate()
             val colorMatrix = ColorMatrix().apply {
               setSaturation((1.0 - grayscale).toFloat())
             }
             val colorFilter = ColorMatrixColorFilter(colorMatrix)
             grayscaleDrawable.colorFilter = colorFilter
             view.setImageDrawable(grayscaleDrawable)
+          } else {
+            view.setImageDrawable(result)
           }
         },
         onError = { error ->

diff --git a/ios/FasterImageViewManager.swift b/ios/FasterImageViewManager.swift
@@ -52,6 +52,7 @@ struct ImageOptions: Decodable {
   let url: String
   let headers: [String: String]?
   let grayscale: Double?
+  let colorMatrix: [[Double]]?
   let ignoreQueryParamsForCacheKey: Bool?
   let priority: String?
 }
@@ -173,6 +174,7 @@ final class FasterImageView: UIView {
         }
         progressiveLoadingEnabled = options.progressiveLoadingEnabled ?? false
         grayscale = options.grayscale ?? 0.0
+        colorMatrix = options.colorMatrix ?? [[1.0, 0.0, 0.0, 0.0, 0.0], [0.0, 1.0, 0.0, 0.0, 0.0], [0.0, 0.0, 1.0, 0.0, 0.0], [0.0, 0.0, 0.0, 1.0, 0.0]]
         ignoreQueryParamsForCacheKey = options.ignoreQueryParamsForCacheKey ?? false
 
         if let url = URL(string: options.url) {
@@ -279,6 +281,26 @@ final class FasterImageView: UIView {
       }
     }
   }
+
+  var colorMatrix = [[1.0, 0.0, 0.0, 0.0, 0.0], [0.0, 1.0, 0.0, 0.0, 0.0], [0.0, 0.0, 1.0, 0.0, 0.0], [0.0, 0.0, 0.0, 1.0, 0.0]] {
+      didSet {
+          if !colorMatrix.isEmpty && colorMatrix.count == 4 && colorMatrix.allSatisfy(({ $0.count == 5 })) {
+              lazyImageView.processors = [
+                  ImageProcessors.CoreImageFilter(
+                      name: "CIColorMatrix",
+                      parameters: [
+                        "inputRVector": CIVector(x: colorMatrix[0][0], y: colorMatrix[0][1], z: colorMatrix[0][2], w: colorMatrix[0][3]),
+                        "inputGVector": CIVector(x: colorMatrix[1][0], y: colorMatrix[1][1], z: colorMatrix[1][2], w: colorMatrix[1][3]),
+                        "inputBVector": CIVector(x: colorMatrix[2][0], y: colorMatrix[2][1], z: colorMatrix[2][2], w: colorMatrix[2][3]),
+                        "inputAVector": CIVector(x: colorMatrix[3][0], y: colorMatrix[3][1], z: colorMatrix[3][2], w: colorMatrix[3][3]),
+                        "inputBiasVector": CIVector(x: colorMatrix[0][4], y: colorMatrix[1][4], z: colorMatrix[2][4], w: colorMatrix[3][4]),
+                      ],
+                      identifier: "custom.colorMatrix"
+                  )
+              ]
+          }
+      }
+  }
 
   var showActivityIndicator = false {
     didSet {

diff --git a/src/index.tsx b/src/index.tsx
@@ -46,6 +46,7 @@ export type AndroidImageResizeMode =
  * @property {number} [borderBottomLeftRadius] - Bottom left border radius of the image
  * @property {number} [borderBottomRightRadius] - Bottom right border radius of the image
  * @property {number} [grayscale] - Grayscale value of the image, 0-1
+ * @property {number[][]} [colorMatrix] - Color matrix to apply to the image
  * @property {boolean} [allowHardware] - Allow hardware rendering, defaults to true (Android only)
  * @property {boolean} [ignoreQueryParamsForCacheKey] - Ignore query params for cache key, defaults to false
  * @property {'veryLow' | 'low' | 'normal' | 'high' | 'veryHigh'} [priority] - Set Image's loading priority, defaults to 'normal' (iOS only)
@@ -75,6 +76,7 @@ export type ImageOptions = {
   url: string;
   headers?: Record<string, string>;
   grayscale?: number;
+  colorMatrix?: number[][];
   allowHardware?: boolean;
   ignoreQueryParamsForCacheKey?: boolean;
   priority?: 'veryLow' | 'low' | 'normal' | 'high' | 'veryHigh';