C#でOpenCVを使う

C#でOpenCvSharpを利用して画像処理をしてみます。

OpenCvSharpとは
環境
コンソールアプリを作る

プロジェクトを作る
OpenCvSharpをプロジェクトに追加する
コードを書く
コンソールアプリを動かしてみる

WPFアプリを作る

WPFプロジェクトを作る
OpenCvSharpをWPFプロジェクトに追加する
ウィンドウレイアウトを作成する
コードビハインドにコードを記入する
WPFアプリを動かしてみる

OpenCvSharpとは

OpenCVのC#用のラッパーです。個人の方が開発されて公開されているものです。NuGetでインストールできます。作者様に感謝します。

環境

試した環境は下記です。

Windows10
Visual Studio Express 2017 for Windows Desktop
OpenCvSharp4
ターゲットの.Net framework 4.6.1

公式のドキュメントを見るとVisual C++ 2019と書いてあるのですが、Visual Studio Express 2017で試してみました。

コンソールアプリを作る

PNGファイルを読み込んで、グレースケール変換した画像と輪郭抽出した画像を表示するコンソールアプリを作ってみます。

プロジェクトを作る

Visual Studioを起動してコンソールアプリのプロジェクトを作成します。

作成したら、そのプロジェクトのフォルダの中にあるdebugという名前のフォルダに、アプリで読み込む画像ファイルをコピーしておきます。

OpenCvSharpをプロジェクトに追加する

Visula Studioの「プロジェクト」メニューの「NuGetパッケージ管理」を選択します。すると、NuGetの管理ウィンドウが開きます。

NuGet管理ウィンドウの「参照」を選択して、検索欄にopencvsharpと入力して検索すると、関連するパッケージが表示されます。

そうしたら、下記のパッケージをインストールします。

OpenCvSharp4
OpenCvSharp4.runtime.win

これで、OpenCvSharpがプロジェクトに追加されます。

コードを書く

コードは下記のようにしました。

using OpenCvSharp;

namespace testapp
{
    class Program
    {
        static void Main(string[] args)
        {
            var src = new Mat("test.png", ImreadModes.Grayscale);
            var dst = new Mat();
            Cv2.Canny(src, dst, 50, 200);
            using (new Window("src image", src))
            using (new Window("dst image", dst))
            {
                Cv2.WaitKey();
            }
            src.Dispose();
        }
    }
}

コンソールアプリを動かしてみる

Visual Studioの「デバッグ」メニューの「デバッグの開始」を選択すると、デバッグモードでプログラムが実行されます。

元画像として、下図の画像を準備しました。プロ生ちゃんです。

デバッグを実行すると、コンソールウィンドウが開いて、画像が別ウィンドウに表示されます。

コードに書いた通り、グレースケール画像と輪郭抽出がされた画像が表示されました。

WPFアプリを作る

デスクトップアプリ（WPF）を作ってみます。

WPFプロジェクトを作る

Visual Studioを起動してデスクトップアプリ（WPF）のプロジェクトを作成します。

作成したら、そのプロジェクトのフォルダの中にあるdebugという名前のフォルダに、アプリで読み込む画像ファイルをコピーしておきます。

OpenCvSharpをWPFプロジェクトに追加する

NuGetでOpenCvSharp4をプロジェクトにインストールするのですが、WPFの場合は１つ増えます。

OpenCvSharp4
OpenCvSharp4.runtime.win
OpenCvSharp4.WpfExtensions

ウィンドウレイアウトを作成する

ウィンドウのレイアウトをXAMLで作成します。

今回は、グレースケールに変換した画像と輪郭抽出した画像を横に並べて表示するようにしてみます。

<Window x:Class="test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:test"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Image Name="imgGry" Grid.Column="0" Stretch="None" />
        <Image Name="imgCny" Grid.Column="1" Stretch="None" />
    </Grid>
</Window>

Imageを並べました。

コードビハインドにコードを記入する

MainWindow.xaml.csにコードを書きます。

using System.Windows.Media.Imaging;
using OpenCvSharp;
using OpenCvSharp.WpfExtensions;

namespace test
{
    public partial class MainWindow : System.Windows.Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var src = new Mat("test.png", ImreadModes.Grayscale);
            var dst = new Mat();
            Cv2.Canny(src, dst, 50, 200);

            BitmapSource gray_bitmap = BitmapSourceConverter.ToBitmapSource(src);
            imgGry.Source = gray_bitmap;
            BitmapSource cny_bitmap = BitmapSourceConverter.ToBitmapSource(dst);
            imgCny.Source = cny_bitmap;

            src.Dispose();
        }
    }
}

BitmapSourceConverterクラスがWpfExtensions名前空間にありますので、注意です。

WPFアプリを動かしてみる

アプリを実行してみます。

画像サンプルは、コンソールアプリの時と同じ画像を使います。

画像をウィンドウに表示できました。

Previous: C#でDataAdapterを使ってAccessのデータベースを読み書きしてみた（OleDb編） Next: C#のOpenCvSharpでMatとBitmapSourceを変換する

公開日 2020-09-20