リアクトネイティブ

ReactNativeで画像処理にOpenCVを使用する方法



How Use Opencv Image Processing React Native



OpenCVとReactNativeを使用して画像を処理する方法について考えたことがある場合は、適切な場所に来ています。

OpenCVと リアクトネイティブ 一緒にあなたがすることができます モバイルデバイスで画像を処理する （デバイスのカメラで撮影された画像を処理する可能性が最も高い）。



これらの最大のもの 利点 はい：

  • 実装が簡単。
  • 使いやすい。
  • インターネット上には多くのチュートリアルがあり、OpenCVの信頼できる公式ドキュメントがあります。
  • モバイルアプリケーションのサイズはわずか12メガバイトになります。

OpenCVとReactNativeを使用して画像を段階的に処理する方法を紹介しますが、最初にいくつか説明します。



OpenCVとは何ですか？

OpenCV （オープンソースのコンピュータービジョンライブラリ） これは、オープンソースのコンピュータービジョンおよび機械学習ソフトウェアライブラリです。 OpenCVは、コンピュータービジョンアプリケーションに共通のインフラストラクチャを提供し、商用製品での機械知覚の使用を加速するように構築されています。

ライブラリには 2500以上の最適化アルゴリズム 、クラシックおよび最新のコンピュータービジョンと機械学習アルゴリズムの完全なセットを含みます。

これらのアルゴリズムを使用して、顔の検出と認識、オブジェクトの認識、ビデオ内の人間の行動の分類、カメラの動きの追跡、移動するオブジェクトの追跡、オブジェクトの3Dモデルの抽出、ステレオカメラからの3Dポイントクラウドの生成、画像のつなぎ合わせを行って、高品質の画像を生成できます。シーン全体の解像度の画像、画像データベースから類似の画像を見つけ、フラッシュで撮影した画像から赤い目を取り除き、目の動きを追跡し、風景を認識し、拡張現実と重ね合わせるためのマーカーを作成します。



OpenCVには以上のものがあります 47,000のコミュニティ 、見積もり 1,400万回以上のダウンロード 。

このライブラリは、企業、研究グループ、政府機関で広く使用されています。

OpenCVはC ++でネイティブに書かれています。

OpenCVは2010年にAndroid環境に移植されて以来、ライブラリの全機能をモバイルアプリケーション開発で使用できるようになりました。

OpenCV開発チームは、2012年にiOSの拡張サポートの追加に積極的に取り組みました。 バージョン2.4.2（2012）以降、完全な統合が提供されています。

リアクトネイティブ 2015年にFacebookで 年初 リリース 。 React Nativeでは、JavaScriptのみを使用できます モバイルアプリケーションの構築 。 Reactと同じデザインを使用しているため、宣言型コンポーネントからリッチなモバイルUIを構成できます。

React NativeとOpenCVは良い友達です！

Googleを使用して「reactnativeopencv」を検索すると、次のリンクに遭遇します。

このチュートリアルは何についてですか？

このチュートリアルでは、サンプルプロジェクトをビルドします。 ザ・ 事業 デバイスのカメラを使用する 写真撮影、 そして、ネイティブコードを使用して処理します。 そして、キャプチャされた画像がぼやけているか鮮明であるとき 返されたメッセージ 。

通常のJavaScriptでの操作は非常に効果がありません。 JavaScriptは、非常に重い計算には十分ではありません。

私たちは決してJavaまたはObjective-Cの開発者ではないため、Java / Objective-Cコードでは不十分な場合があることに注意してください。 このトピックに貢献したい場合は、お問い合わせください。

OpenCVの基本的な準備

ステップ1： react-native init reactNativeOpenCvTutorial

ステップ2： プロジェクトディレクトリで実行downloadAndInsertOpenCV.shスクリプト（ ここで見つけることができます） 、 スクリプト できる AndroidおよびiOS用のopenCVファイルをダウンロードして挿入します。 ファイル内のパスが設定と一致しない可能性があるため、パスを変更する必要がある場合があります。

Androidチュートリアル

ステップ1： AndroidStudioでプロジェクトを開きます。

ステップ2： Android Studioのプロンプトに従って、プロジェクトを同期します。

ステップ3： ダウンロード Android用OpenCVの最新バージョン 。 私の場合は3.4.1です。

ステップ4：移動 Android StudioへのOpenCVのインポート：from File -> New -> Import Module sdk/java File -> New -> Import Module 、解凍したOpenCVアーカイブsdk/javaフォルダーで選択します。

ステップ5： インポートされたOpenCVモジュールを更新しますbuild.gradleプロジェクトのbuild.gradleに一致するように4つのフィールドを更新するには：

  • 翻訳者
  • buildToolsVersion
  • minSdkVersion
  • targetSdkVersion。

ステップ6： モジュールの依存関係を追加します。

Application -> Module Settingsそして、Dependenciesラベルを選択します。 下部をクリック+アイコン、選択 'Module Dependency次に、インポートされたOpenCVモジュールを選択します。

Android Studio v1.2.2の場合、プロジェクトビューでアクセスするには 'Module Settings 、関連するモジュールを右クリックして、Open Module Settingsを選択してください。 。

オンにするModule Settings 。

クリック+ 、 'Module Dependencyを選択し、リストからOpenCVライブラリを選択します。

ステップ7： in android/app/src/java com.reactlibrary Packageというファイルを作成します。

ステップ8： 適切な権限でリストを更新します。

RNOpenCvLibraryModule.java

見る ファイル全体 。

ステップ9： 新しく作成したパッケージに作成しますRNOpenCvLibraryModule.javaファイル、RNOpenCvLibraryPackage.java 以下のように記入してください 。

ステップ10： MainApplication.java documentという名前の新しいパッケージを作成します そして、以下のように記入してください 。

ステップ11： in MainApplicationファイルに正しいインポートを追加し、OpenCVパッケージをリストに追加し、次のようにクラス内のnew RNOpenCvLibraryPackage()に正しいコードを追加します。

MainApplication BaseLoaderCallback

will MainApplicationパッケージリストに追加します。

in opencv2.frameworkクラスに追加Linked Frameworks and Libraries ：

また、あなたの.pchに次のコールバックを追加します。

に ここに 見る ファイル全体 。

iOSチュートリアル

ステップ1： XCodeでiOSプロジェクトを開きます。

ステップ2： 意志RNOpenCvLibrary.h追加RNOpenCvLibrary.mm 。

ステップ3： iOSディレクトリに新しいグループを作成します。 私はそれを「OpenCV」と名付けました。

ステップ4： .pchファイルを追加し、OpenCVディレクトリに挿入します。

ステップ5： あなたのPrecompile Prefix Headerファイルに適切なコンテンツを追加する- 次のように 。

ステップ6： Yes documentというファイルを作成します そして、以下のように記入してください 。

ステップ7： Prefix Header path documentというファイルを作成します そして、以下のように記入してください 。

ステップ8： will Info.plist設定NativeModulesそして次のように設定OpenCV.js, ：

ステップ9： ファイルに以下を追加しますOpenCV.js,

react-native link

見る ファイル全体 。

最後の部分-JavaScript

ステップ1： srcフォルダーに、proceedWithCheckingBlurryImageという名前のファイルとcheckForBlurryImage document maven { url “ https://jitpack.io ” }という名前のフォルダーを作成し、次のコマンドを入力します。

package.json

見る ファイル全体 。

ステップ2： 迅速なセットアップのために、いくつかのサードパーティライブラリを使用します。 ターミナルを開き、次のように入力します。 

Imports:

ステップ3： ライブラリをリンクすることを忘れないでください：

import com.reactlibrary.RNOpenCvLibraryPackage 
import org.opencv.android.BaseLoaderCallback 
import org.opencv.android.LoaderCallbackInterface 
import org.opencv.android.OpenCVLoader 
import android.util.Log
。

我々は使用するだろう このファイル 参照。

126行目でカメラをセットアップし、135行目で写真を処理するためのタッチ可能な要素を作成しました。 写真の撮影は、takePicture関数によって処理されます。 写真を撮り、ローカル状態でデータを保存してから、写真がぼやけていないかどうかを引き続き確認します。 function 

NSCameraUsageDescription 
Your message to user when the camera is accessed for the first time 
NSPhotoLibraryAddUsageDescription 
Your message to user when the photo library is accessed for the first time
ネイティブ関数を使用する
import { NativeModules } from ‘react-native’
写真がぼやけている場合は、簡単なメッセージを返します。

ステップ4： 注：カメラへのAndroid接続で問題が発生した場合は、 build.gradleファイル 、特に

export default NativeModules.RNOpenCvLibrary
OK、次にAndroidStudioでプロジェクトを再同期します。

Google Playサービスに関連するエラーがある場合は、 GitHubで これをチェックして 問題 。

react-native-cameraに関連するエラーがある場合は、次のように変更してください

npm i –save react-native-svg 
npm i –save react-native-camera 
npm i –save react-native-easy-toast
次のようにマスターブランチを確認してください。 

“react-native-camera”: “git+  https://[email protected]/react-native-community/react-native-camera  '

結果の例

例の明確な図。 写真のプレビューを受け取り、使用するか繰り返すかを選択できます。

写真をぼかす例。 写真がぼやけているため、繰り返す必要があることを通知するトーストメッセージを受け取りました。

忘れないで GitHubで 見る 最終製品 ！

参照：

これはBrainhubに投稿されたブログです ここにあります 。

'などの他のReactNativeストーリーをご覧ください ReactNativeアプリケーションをクライアントに配信する方法 」！

あなたを構築するための助けを探しています リアクトネイティブ または React 応用？ お電話ください 。

から： https://hackernoon.com/how-to-use-opencv-in-react-native-for-image-processing-db997e73678c