PR

写真から顔を自動認識して、簡単に目隠し加工する(前編)

2012年2月27日(月)
PROJECT KySS

今回はカメラで撮った写真をサーバーに保存する処理(前編)と、サーバーに保存した写真を選択して、その写真に写っている人物に「目隠し」をする(後編)の2回にわたって解説します。後編でも説明しますが、人物に目隠しをするには、FUJIFILMが提供している、「顔検出WebAPI」を使用します。詳細については下記のURLを参照してください。
→参照:顔ラボ

Windows Phoneのプログラム以外に、専用サーバーに配置するASP.NETファイルも必要です。

まずは、このプログラムで実装する機能の動作を、下記に解説しておきます。

このサンプルは実機(現時点ではIS12T)でしか動作しません。エミュレーターでは、サーバーに保存した写真に「目隠し」をすることはできますが、写真を撮ることはできません。

プロジェクトを実機にデプロイし、カメラを起動します。カメラを横向きにして人物を撮影してください(記事中では肖像権フリーの写真をPCの画面に表示して、IS12Tのカメラで撮影しています)。

[画像を保存]ボタンをタップすると撮影した画像が専用サーバーに保存されます(図1)。

図1:PC上に表示させた肖像権フリーの人物を撮影して、サーバーに保存した(クリックで拡大)

[データ一覧]ボタンの使用が可能になりますので、[データ一覧]をタップします。サーバーに保存された画像の一覧が表示されます(図2)。

図2:[データ一覧]ボタンをタップしてサーバーの画像が一覧表示されている(クリックで拡大)

任意の画像を選択して「顔認識」の画面に遷移します。選択した画像が表示されていますので、[目隠し]ボタンをタップすると、画像に赤色の「目隠し」が追加されます。

「目隠し」した画像は、[PicturesHUBに保存]ボタンでPicturesに保存されます(図3)。

図3:画像一覧から任意の画像を選択して「目隠し」をし、Picturesに保存した(クリックで拡大)

サーバーに保存されたデータは、[この画像をサーバーから削除]ボタンで削除できます(図4)。

図4:[この画像をサーバーから削除]ボタンで画像を削除した(クリックで拡大)

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

※使用している画像は肖像権フリーの画像です。

実機(IS12T)で動かした動画はこちらです。

カメラで写した画像をサーバーに保存する

プロジェクトの作成

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]を選択します。次に、「Windows Phone アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「WP71_ImageFileUpload」という名前を付けています。Windows Phoneのバージョンは7.1を選択します。VS2010メニューの[プロジェクト(P)/参照の追加(R)]と選択して、System.Xml.LinqとMicrosoft.Xna.Frameworkを追加しておいてください。

MainPage.xamlの編集とコントロールの追加

x:NameがPageTitleというTextBlockのTextプロパティに「画像をサーバーに保存」と指定します。

x:NameがPageTitleのTextBlockのStyleプロパティに指定されているPhoneTextTitle1Styleでは、文字サイズが大きすぎるので、PhoneTextTitle2Styleを指定します。そうすると、文字サイズが小さく表示されます。これらのスタイルは下記URLの「Theme Resources for Windows Phone」で定義されています。{StaticResource}を使用して、これらのテーマリソースを参照します。またFontWeightプロパティにBoldを指定して、太字としています。
→参照:Theme Resources for Windows Phone(msdn)

ツールボックスからButtonコントロールを3個、Imageコントロールを1個、TextBlockコントロールを図5のように配置します。ImageコントロールのStretchプロパティにはUniformを指定します。Stretch列挙体に付いては、下記URLを参照してください。
→参照:Stretch 列挙体(msdn)

図5:各コントロールを配置した(クリックで拡大)

saveButtonとichiranButtonは最初の状態では、IsEnabledプロパティのチェックを外し、使用不可としておきます。

書き出されるXAMLコードは省略します。

「Windows Phone 縦向きのページ」(ImageShowPage.xaml)の作成

VS2010メニューの[プロジェクト(P)/新しい項目の追加(W)]と選択し、「Windows Phone 縦向きのページ」を選択します。「名前(N)」にはImageShowPage.xamlと入力します

ImageShowPage.xamlの編集とコントロールの配置

x:NameがPageTitleというTextBlockを削除します。x:NameがApplicationTitleというTextBlockのTextプロパティに「画像一覧」と指定します。ツールボックスからListBoxコントロールを1個配置します(図6)。

図6:ListBoxコントロールを配置した(クリックで拡大)
Think IT会員限定特典
  • 「写真から顔を自動認識して、簡単に目隠し加工する」サンプルプログラム

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています