feat: mat to base64 to mat methods

lukaszkurantdev · lukaszkurantdev · commit 564b937decb2 · 2024-08-13T08:54:37.000+02:00
diff --git a/cpp/ConvertImage.cpp b/cpp/ConvertImage.cpp
@@ -0,0 +1,162 @@
+//
+//  ConvertImage.cpp
+//  react-native-fast-opencv
+//
+//  Created by Łukasz Kurant on 13/08/2024.
+//
+
+#include "ConvertImage.hpp"
+#include <opencv2/opencv.hpp>
+#include <opencv2/core.hpp>
+#include <opencv2/imgcodecs.hpp>
+
+#include <vector>
+#include <string>
+
+using namespace std;
+using namespace cv;
+
+static const std::string base64_chars =
+"ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+"abcdefghijklmnopqrstuvwxyz"
+"0123456789+/";
+
+static inline bool is_base64( unsigned char c )
+{
+    return (isalnum(c) || (c == '+') || (c == '/'));
+}
+
+std::string ImageConverter::base64_encode(uchar const* bytes_to_encode, unsigned int in_len)
+{
+    std::string ret;
+
+    int i = 0;
+    int j = 0;
+    unsigned char char_array_3[3];
+    unsigned char char_array_4[4];
+
+    while (in_len--)
+    {
+        char_array_3[i++] = *(bytes_to_encode++);
+        if (i == 3)
+        {
+            char_array_4[0] = (char_array_3[0] & 0xfc) >> 2;
+            char_array_4[1] = ((char_array_3[0] & 0x03) << 4) + ((char_array_3[1] & 0xf0) >> 4);
+            char_array_4[2] = ((char_array_3[1] & 0x0f) << 2) + ((char_array_3[2] & 0xc0) >> 6);
+            char_array_4[3] = char_array_3[2] & 0x3f;
+
+            for (i = 0; (i <4); i++)
+            {
+                ret += base64_chars[char_array_4[i]];
+            }
+            i = 0;
+        }
+    }
+
+    if (i)
+    {
+        for (j = i; j < 3; j++)
+        {
+            char_array_3[j] = '\0';
+        }
+
+        char_array_4[0] = (char_array_3[0] & 0xfc) >> 2;
+        char_array_4[1] = ((char_array_3[0] & 0x03) << 4) + ((char_array_3[1] & 0xf0) >> 4);
+        char_array_4[2] = ((char_array_3[1] & 0x0f) << 2) + ((char_array_3[2] & 0xc0) >> 6);
+        char_array_4[3] = char_array_3[2] & 0x3f;
+
+        for (j = 0; (j < i + 1); j++)
+        {
+            ret += base64_chars[char_array_4[j]];
+        }
+        
+        while ((i++ < 3))
+        {
+            ret += '=';
+        }
+    }
+
+    return ret;
+}
+
+std::string ImageConverter::base64_decode(std::string const& encoded_string)
+{
+    int in_len = encoded_string.size();
+    int i = 0;
+    int j = 0;
+    int in_ = 0;
+    unsigned char char_array_4[4], char_array_3[3];
+    std::string ret;
+
+    while (in_len-- && (encoded_string[in_] != '=') && is_base64(encoded_string[in_]))
+    {
+        char_array_4[i++] = encoded_string[in_]; in_++;
+
+        if (i == 4)
+        {
+            for (i = 0; i < 4; i++)
+            {
+                char_array_4[i] = base64_chars.find(char_array_4[i]);
+            }
+
+            char_array_3[0] = (char_array_4[0] << 2) + ((char_array_4[1] & 0x30) >> 4);
+            char_array_3[1] = ((char_array_4[1] & 0xf) << 4) + ((char_array_4[2] & 0x3c) >> 2);
+            char_array_3[2] = ((char_array_4[2] & 0x3) << 6) + char_array_4[3];
+
+            for (i = 0; (i < 3); i++)
+            {
+                ret += char_array_3[i];
+            }
+
+            i = 0;
+        }
+    }
+
+    if (i)
+    {
+        for (j = i; j < 4; j++)
+        {
+            char_array_4[j] = 0;
+        }
+        
+        for (j = 0; j < 4; j++)
+        {
+            char_array_4[j] = base64_chars.find(char_array_4[j]);
+        }
+
+        char_array_3[0] = (char_array_4[0] << 2) + ((char_array_4[1] & 0x30) >> 4);
+        char_array_3[1] = ((char_array_4[1] & 0xf) << 4) + ((char_array_4[2] & 0x3c) >> 2);
+        char_array_3[2] = ((char_array_4[2] & 0x3) << 6) + char_array_4[3];
+
+        for (j = 0; (j < i - 1); j++)
+        {
+            ret += char_array_3[j];
+        }
+    }
+
+    return ret;
+}
+
+string ImageConverter::mat2str(const Mat& m)
+{
+    int params[3] = {0};
+    params[0] = IMWRITE_JPEG_QUALITY;
+    params[1] = 100;
+
+    vector<uchar> buf;
+    bool code = cv::imencode(".jpg", m, buf, std::vector<int>(params, params+2));
+    uchar* result = reinterpret_cast<uchar*> (&buf[0]);
+
+    return base64_encode(result, buf.size());
+
+}
+
+Mat ImageConverter::str2mat(const string& s)
+{
+    // Decode data
+    string decoded_string = base64_decode(s);
+    vector<uchar> data(decoded_string.begin(), decoded_string.end());
+
+    cv::Mat img = imdecode(data, IMREAD_UNCHANGED);
+    return img;
+}
diff --git a/cpp/ConvertImage.hpp b/cpp/ConvertImage.hpp
@@ -0,0 +1,32 @@
+//
+//  ConvertImage.hpp
+//  react-native-fast-opencv
+//
+//  Created by Łukasz Kurant on 13/08/2024.
+//
+
+#ifndef ConvertImage_hpp
+#define ConvertImage_hpp
+
+#include <stdio.h>
+#include <opencv2/opencv.hpp>
+#include <opencv2/core.hpp>
+#include <opencv2/imgcodecs.hpp>
+
+#include <vector>
+#include <string>
+
+using namespace std;
+using namespace cv;
+
+class ImageConverter {
+public:
+    static cv::Mat str2mat(const string& imageBase64);
+    static string mat2str(const Mat& img);
+
+private:
+    static std::string base64_encode(uchar const* bytesToEncode, unsigned int inLen);
+    static std::string base64_decode(std::string const& encodedString);
+};
+
+#endif
diff --git a/cpp/FOCV_Object.cpp b/cpp/FOCV_Object.cpp
@@ -10,6 +10,7 @@
 #include "FOCV_JsiObject.hpp"
 #include "jsi/TypedArray.h"
 #include <opencv2/opencv.hpp>
+#include "ConvertImage.hpp"
 
 constexpr uint64_t hashString(const char* str, size_t length) {
   uint64_t hash = 14695981039346656037ull;
@@ -92,33 +93,18 @@ jsi::Object FOCV_Object::create(jsi::Runtime& runtime, const jsi::Value* argumen
 }
 
 jsi::Object FOCV_Object::convertToJSI(jsi::Runtime& runtime, const jsi::Value* arguments) {
-
     jsi::Object value(runtime);
     std::string objectType = FOCV_JsiObject::type_from_wrap(runtime, arguments[0]);
     std::string id = FOCV_JsiObject::id_from_wrap(runtime, arguments[0]);
     
     switch(hashString(objectType.c_str(), objectType.size())) {
         case hashString("mat", 3): {
             cv::Mat mat = FOCV_Storage::get<cv::Mat>(id);
-//            cv::Mat flat = mat.reshape(1, mat.total()*mat.channels());
-//            std::vector<uchar> vec = mat.isContinuous() ? flat : flat.clone();
-//            
-//            jsi::Array valueArray(runtime, vec.size());
-//            
-//            for (unsigned int i = 0; i < vec.size(); i++) {
-//                valueArray.setValueAtIndex(runtime, i, jsi::Value(vec.at(i)));
-//            }
-//            //TODO
-//            mrousavy::TypedArray<mrousavy::TypedArrayKind::Uint8Array>(runtime, mat.total() * mat.channels());
-//            getTypedArray(runtime, jsBuffer)
-//                      .as<TypedArrayKind::Uint8Array>(runtime)
-//                      .updateUnsafe(runtime, (uint8_t*)data, size);
-            
      
+            value.setProperty(runtime, "base64", jsi::String::createFromUtf8(runtime, ImageConverter::mat2str(mat)));
             value.setProperty(runtime, "size", jsi::Value(mat.size));
             value.setProperty(runtime, "cols", jsi::Value(mat.cols));
             value.setProperty(runtime, "rows", jsi::Value(mat.rows));
-            value.setProperty(runtime, "data", valueArray);
         } break;
         case hashString("mat_vector", 9): {
             std::vector<cv::Mat> mats = FOCV_Storage::get<std::vector<cv::Mat>>(id);
diff --git a/cpp/react-native-fast-opencv.cpp b/cpp/react-native-fast-opencv.cpp
@@ -7,6 +7,7 @@
 #include <FOCV_Storage.hpp>
 #include <FOCV_Function.hpp>
 #include "FOCV_Object.hpp"
+#include "ConvertImage.hpp"
 #include "FOCV_JsiObject.hpp"
 #include "opencv2/opencv.hpp"
 
@@ -35,7 +36,6 @@ void OpenCVPlugin::installOpenCV(jsi::Runtime& runtime, std::shared_ptr<react::C
 
 OpenCVPlugin::OpenCVPlugin(std::shared_ptr<react::CallInvoker> callInvoker) : _callInvoker(callInvoker) {}
 
-
 jsi::Value OpenCVPlugin::get(jsi::Runtime& runtime, const jsi::PropNameID& propNameId) {
   auto propName = propNameId.utf8(runtime);
 
@@ -55,6 +55,20 @@ jsi::Value OpenCVPlugin::get(jsi::Runtime& runtime, const jsi::PropNameID& propN
         return FOCV_JsiObject::wrap(runtime, "mat", id);
     });
   }
+    if (propName == "base64ToMat") {
+      return jsi::Function::createFromHostFunction(
+          runtime, jsi::PropNameID::forAscii(runtime, "frameBufferToMat"), 1,
+          [=](jsi::Runtime& runtime, const jsi::Value& thisValue, const jsi::Value* arguments,
+              size_t count) -> jsi::Object {
+               
+          std::string base64 = arguments[0].asString(runtime).utf8(runtime);
+
+          auto mat = ImageConverter::str2mat(base64);
+          auto id = FOCV_Storage::save(mat);
+
+          return FOCV_JsiObject::wrap(runtime, "mat", id);
+      });
+    }
   else if (propName == "createObject") {
       return jsi::Function::createFromHostFunction(
           runtime, jsi::PropNameID::forAscii(runtime, "createObject"), 1,
@@ -108,6 +122,7 @@ std::vector<jsi::PropNameID> OpenCVPlugin::getPropertyNames(jsi::Runtime& runtim
     std::vector<jsi::PropNameID> result;
 
     result.push_back(jsi::PropNameID::forAscii(runtime, "frameBufferToMat"));
+    result.push_back(jsi::PropNameID::forAscii(runtime, "base64ToMat"));
     result.push_back(jsi::PropNameID::forAscii(runtime, "createObject"));
     result.push_back(jsi::PropNameID::forAscii(runtime, "toJSValue"));
     result.push_back(jsi::PropNameID::forAscii(runtime, "copyObjectFromVector"));
diff --git a/example/src/ImageExample.tsx b/example/src/ImageExample.tsx
@@ -2,34 +2,40 @@ import { useState } from 'react';
 import { Button, Image, SafeAreaView, Text } from 'react-native';
 import {
   ColorConversionCodes,
-  convertUint8ArrayToBase64,
   DataTypes,
   ObjectType,
   OpenCV,
-  readImageAsUint8Array,
 } from 'react-native-fast-opencv';
 import { launchImageLibrary, type Asset } from 'react-native-image-picker';
 
 export function ImageExample() {
   const [photo, setPhoto] = useState<Asset | null>(null);
-  const [base64, setBase64] = useState<string>('');
+  const [b64, setB64] = useState<string>('');
 
   const test = async () => {
-    const result = await launchImageLibrary({ mediaType: 'photo' });
-    console.log(result);
+    const result = await launchImageLibrary({
+      mediaType: 'photo',
+      includeBase64: true,
+    });
     setPhoto(result.assets?.at(0) || null);
   };
 
   const process = async () => {
-    if (photo && photo.uri && photo.width && photo.height) {
-      const array = await readImageAsUint8Array(photo.uri);
-      const src = OpenCV.frameBufferToMat(photo.height, photo.width, array);
-
-      const result = OpenCV.toJSValue(src);
-      // const base64String = btoa(
-      //   String.fromCharCode(...new Uint8Array(result.data))
-      // );
-      console.log(array.length);
+    if (photo && photo.base64 && photo.width && photo.height) {
+      const src = OpenCV.base64ToMat(photo.base64);
+      const dst = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
+
+      OpenCV.invoke('cvtColor', src, dst, ColorConversionCodes.COLOR_BGR2RGB);
+      OpenCV.invoke('cvtColor', dst, dst, ColorConversionCodes.COLOR_BGR2HSV);
+
+      const lowerBound = OpenCV.createObject(ObjectType.Vec3b, 0, 120, 120);
+      const upperBound = OpenCV.createObject(ObjectType.Vec3b, 255, 255, 255);
+
+      OpenCV.invoke('inRange', dst, lowerBound, upperBound, dst);
+
+      const result = OpenCV.toJSValue(dst);
+      setB64(result.base64);
+      // console.log(array.length);
     }
   };
 
@@ -40,9 +46,16 @@ export function ImageExample() {
         URI: {photo?.uri} {photo?.height} {photo?.width}
       </Text>
       <Button title="Process" onPress={process} />
-      {base64 && photo?.width && photo?.height && (
+      {photo?.base64 && photo?.width && photo?.height && (
+        <Image
+          source={{ uri: 'data:image/jpg;base64,' + photo.base64 }}
+          height={300}
+          width={300}
+        />
+      )}
+      {b64 && photo?.width && photo?.height && (
         <Image
-          source={{ uri: 'data:image/png;base64,' + base64 }}
+          source={{ uri: 'data:image/png;base64,' + b64 }}
           height={300}
           width={300}
         />
diff --git a/lefthook.yml b/lefthook.yml
@@ -1,12 +1,12 @@
-pre-commit:
-  parallel: true
-  commands:
-    lint:
-      glob: "*.{js,ts,jsx,tsx}"
-      run: npx eslint {staged_files}
-    types:
-      glob: "*.{js,ts, jsx, tsx}"
-      run: npx tsc
+# pre-commit:
+#   parallel: true
+#   commands:
+#     lint:
+#       glob: "*.{js,ts,jsx,tsx}"
+#       run: npx eslint {staged_files}
+#     types:
+#       glob: "*.{js,ts, jsx, tsx}"
+#       run: npx tsc
 commit-msg:
   parallel: true
   commands:
diff --git a/src/index.tsx b/src/index.tsx
@@ -55,6 +55,7 @@ export const OpenCV = global.__loadOpenCV();
 export interface OpenCVModel {
   clearBuffers(): void;
   frameBufferToMat(rows: number, cols: number, input: Uint8Array): Mat;
+  base64ToMat(path: string): Mat;
 
   // Creation
   createObject(
@@ -81,7 +82,7 @@ export interface OpenCVModel {
     size: number;
     cols: number;
     rows: number;
-    data: Uint8Array;
+    base64: string;
   };
   toJSValue(matVector: MatVector): {
     array: { size: number; cols: number; rows: number }[];
