🙆

[環境構築]React+TypeScriptでWebAssembly002。WindowsでOpenCV,C++,VSCode,CMake。

2024/01/15に公開

C++

<- React+TypeScriptでWebAssembly001
React+TypeScriptでWebAssembly003 ->

(コンパイラはMSVCだよ。)

Abstract

OpenCVを、 Windows,VSCode,C++,CMakeで32bit環境構築してみた。なぜならWebAssemblyが32bit限定だから。
OpenCVですよ。大切なので2回言いました。

前提

VSCode,C++,CMakeの開発環境は、構築済。[環境構築]32bit。WindowsでVSCode,C++,CMakeの開発環境を構築。(コンパイラはMSVC)"OpenCV"なし。
7-zipもインストールしとく。

手順

1. OpenCVのConfigure実行

プロジェクトフォルダ作成
opencvフォルダを作成。
```
$ mkdir opencv && cd opencv
```
- opencvとopencv_contribをダウンロード
opencvとopencv_contribをダウンロード
```
$ curl -Lo opencv4.zip https://github.com/opencv/opencv/archive/4.x.zip
$ curl -Lo opencv_contrib4.zip https://github.com/opencv/opencv_contrib/archive/4.x.zip
```
- opencv4.zip,opencv_contrib4.zipを解凍。
opencvフォルダを作成。
```
$ dir opencv
～略～
2024/01/12  20:21    <DIR>          opencv-4.x
2024/01/15  21:52        98,530,706 opencv4.zip
2023/11/02  23:41    <DIR>          opencv_contrib-4.x
2024/01/15  21:52        61,315,582 opencv_contrib4.zip
～略～
```
- CMake GUI起動
  Where is the source code: D:\apps\opencv\opencv-4.x(topのCMakeLists.txtの場所,適宜読み替えてね。)
  Where to build the binaries: 上記の配下のbuild
  → Configure押下
  
  　　　　　　↓
  Configure done
  
  　　　　　　↓
  この中から、"OPENCV_EXTRA_MODULE_PATH"を頑張って探して設定。
  OPENCV_EXTRA_MODULE_PATH : D:\apps\opencv\opencv_contrib-4.x\modules
  ~~"BUILD_opencv_world"を頑張って探して設定。~~
  ~~BUILD_opencv_world: レ点~~ (opencv_worldはいらんかった)
  → Configureをも一回押下
  Configure done
  
  　　　　　　↓
  → Generate押下
  
  Generating done
  　　　　　　↓
  閉じる。

2. OpenCVをVisual Studio 2022でビルド

D:\apps\opencv\opencv-4.x\build配下にOpenCV.slnが出来てる。
OpenCV.sln をVisual Studio 2022で開く。

　　　　　　↓
OpenCVの中をデバッグするつもりはなので、ReleaseとWin32を選んで、ALL_BUILDを選ぶ。

　　　　　　↓
ビルド。15分ぐらいかな～。

ビルドエラーなし。さすがOpenCV!!
　　　　　　↓
INSTALL -> ビルドを選ぶ。

　　　　　　↓
ビルド。

ビルドエラーなし。さすが。
　　　　　　↓
　ビルド完了。閉じる。

3. 環境変数Pathに設定。

以下のパスを環境変数Pathに追加する。

D:\apps\opencv\opencv-4.x\build\install
D:\apps\opencv\opencv-4.x\build\install\include
D:\apps\opencv\opencv-4.x\build\install\x86\vc17\bin
※D:\apps\opencv\opencv-4.xの部分は自身の環境に読み替えてね。

4. 再起動

環境変数をいじったのでシステムに反映させるために再起動する。

5. プロジェクトフォルダとソース一式を作成

プロジェクトフォルダ作成

bbb1stフォルダを作成。

mkdir bbb2nd && cd bbb2nd

main.cppを作成

main.cppの中身

#include <opencv2/opencv.hpp>

int main(void) {
    // 画像の読み込み
    cv::Mat inputImage = cv::imread("../input.png");

    // 画像が正しく読み込まれたかを確認
    if (inputImage.empty()) {
	std::cerr << "画像を読み込めませんでした" << std::endl;
	return -1;
    }

    // 画像の処理を行う ここでは例として、画像をグレースケールに変換する
    cv::Mat grayscaleImage;
//    cv::cvtColor(inputImage, grayscaleImage, cv::COLOR_BGR2GRAY);
//    ↑この関数はリンクエラーになるので、コメントアウト

    // グレースケール画像を表示
//    cv::imshow("Grayscale Image", grayscaleImage);
//    ↑この関数はリンクエラーになるので、コメントアウト

    // キー入力待ち
    cv::waitKey(0);

    // ウィンドウを閉じる
    cv::destroyAllWindows();
    return 0;
}

解決した。参考:[環境構築]OpenCVをソースビルドした時、デフォルト設定だと、cv::cvtColor()と、cv::imshow()でリンクエラー。

CMakeLists.txtを作成

CMakeLists.txtの中身

cmake_minimum_required(VERSION 3.5)
project(OpenCVExample)

# OpenCVのパッケージを見つける
find_package(OpenCV REQUIRED)

# #OpenCV関係のインクルードディレクトリのパスを設定
# include_directories( ${OpenCV_INCLUDE_DIRS} )

# ソースファイルを指定
set(SOURCES main.cpp)

# 実行可能ファイルをビルド
add_executable(OpenCVExample ${SOURCES})

message('----------------s')
message(${SOURCES})
message(${OpenCV_LIBS})
message('----------------e')

# OpenCVをリンク
target_link_libraries(OpenCVExample ${OpenCV_LIBS})