カメラで撮った写真に各種フィルタをかける

開発ツール

技術解説

連載 :

Windows Phone Tips集　第3弾

2012年1月25日(水)

PROJECT KySS

次に、MainPage.xamlを展開して表示される、MainPage.xaml.vbをダブルクリックしてリスト2のコードを記述します。

ロジックコードを記述する

リスト2　(MainPage.xaml.vb)

01Option Strict On
02 
03ランチャーやチューザーに関するクラスの含まれる、Microsoft.Phone.Tasks名前空間をインポートします。
04Imports Microsoft.Phone.Tasks
05 
06Imports System.Windows.Media.Imaging
07Imports Microsoft.Phone
08 
09イメージを読み込んだり、操作したりするコントロールやクラスが含まれた、基本の名前空間であるImageToolsをインポートします。ImageTools.Filtering名前空間には、セピア、グレースケール、反転フィルタなどの画像フィルタが含まれています
10Imports ImageTools
11Imports ImageTools.Filtering
12 
13仮想ファイルシステムを作成および使用するための型が含まれている、System.IO.IsolatedStorage名前空間をインポートします。分離ストレージによって、安全なクライアント側のストレージが提供されます。
14Imports System.IO.IsolatedStorage
15曲、アルバム、再生リスト、ピクチャの列挙、再生、表示するためのクラスが含まれた、Microsoft.Xna.Framework.Media名前空間をインポートします。この名前空間をインポートしていないとMediaLibrayクラスが使用できませんので、注意してください。
16Imports Microsoft.Xna.Framework.Media
17 
18Imports System.IO
19  Inherits PhoneApplicationPage
20 
21  ' コンストラクター
22  Public Sub New()
23    InitializeComponent()
24  End Sub
25 
26カメラを起動するCameraCaptureTaskクラス用メンバ変数myCameraTaskを宣言します。
27  Dim myCameraTask As CameraCaptureTask
28 
29loadImage、filterImageを、Image クラスのピクセルを格納してファイルやストリームのサイズ変更、またカッティングのような操作からイメージを読み込む機能を提供するクラスであるExtendedImageクラス用メンバ変数として宣言します。
30  Dim loadImage As ExtendedImage
31  Dim filterImage As ExtendedImage
32 
33BitmapImageクラス用メンバ変数として、myImageを宣言します。BitmapImageクラスは、イメージを読み込むためのBitmapSourceを提供するクラスです。
34  Dim myImage As BitmapImage
35 
36ContextMenuクラスの新しいインスタンス、myContextMenuオブジェクトをメンバ変数として宣言します。ContextMenuコントロールは、コントロールのコンテキストに固有の機能を公開するポップアップメニューを表示するコントロールです。このコントロールは、Silverlight for Windows Phone Toolkit - Nov 2011.msiに含まれていますので、下記URLよりダウンロードしてインストールしてください。
37http://silverlight.codeplex.com/releases/view/75888
38  Dim myContextMenu As New ContextMenu
39 
40新しいMenuItemクラスのインスタンスmyMenuItem1をメンバ変数として宣言します。MenuItemクラスは、ContextMenu 内に表示される個別の項目を表すクラスです。
41  Dim myMenuItem1 As New MenuItem
42   
43MenuItemクラス型の新しいリストであるmenuItemListをメンバ変数として宣言します。
44  Dim menuItemList As New List(Of MenuItem)
45 
46UIElementクラス型のオブジェクト変数myControlをメンバ変数として宣言します。UIElementクラスは、Silverlightのオブジェクトの基本クラスです。Silverlightで使用する各コントロールは、基本的に全てUIElementになります。
47  Dim imageControl As UIElement

ページがアクティブになった時の処理

01新しいCameraCaptureTaskのインスタンスを作成します。AddHandlerステートメントで、タスクが完了した時のCompletedイベントハンドラを追加します。Completedイベント内では完了イベントがTaskResult.OKで、正常に完了した場合は以下の処理を行います。
02新しいBitmapImageのインスタンスmyImageを作成します。chooser での選択の結果は引数で渡されるので、SetSourceメソッドで、渡された画像を BitmapImage オブジェクトに格納します。Image1～Image5のSourceプロパティに、chooserで選択した画像を格納しているBitmapImageオブジェクトを指定します。Picturesで選択した画像が表示されます。ただし、Image1～Image4は非表示となっていますので、表面上はImage5の画像のみ表示されています。
03BitmapImageのインスタンスmyImageで初期化された、新しいWriteableBitmapオブジェクトwbを作成します。WriteableBitmapクラスは、書き込みおよび更新が可能な BitmapSource を提供するクラスです。
04新しいExtendedImageクラスのインスタンスを作成します。SetPixelsメソッドで、loadImageオブジェクトに画像のピクセル配列を設定します。書式は下記の通りです。
05 
06ImageBase.SetPixels(画像の新しいPixelWidth(0より大きい),画像の新しいPixelHeight(0より大きい), 色のバイト配列)
07 
08wb.ToByteArrayメソッドは、WriteableBitmap byte()に変換するメソッドです。[参照の追加(R)]から、WriteableBitmapEXWinPhone.dllを追加していなければ、wb.ToByteArrayメソッドが使用できませんので、注意してください。
09Sepiaクラスとしてfilter変数を宣言します。新しいSepiaクラスのインスタンスを作成します。画像のピクセル配列の設定されたloadImageで初期化された、新しいExtendedImageを作成します。Sepia.Applyメソッドで、指定されたRectangleの領域で画像へのフィルタが適用されます。Applyメソッドの書式は下記の通りです。
10 
11Sepia.Apply(フィルタを適用するターゲットとなるイメージ,元のイメージ, フィルタが適用されるべき画像の領域を定義するRectangle)
12 
13Rectangleは下記の値で初期化されます。
14 
15New ImageToos.Rectangle(Rectangleの左上隅のx座標(通常0), Rectangleの左上隅のy座標(通常0),元のイメージのPixelWidth,元のイメージのPixelHeight)
16 
17フィルタの適用されたイメージを、ToBitmapメソッドでBitmapに変換し、Image1のSourceプロパティに指定します。
18Inverter、Grayscale、Brightnessについても同じ処理を繰り返します。Brightnessは輝度を表し、このサンプルでは輝度に50を与えて初期化しています。値は-255～255の範囲の値を指定できます。
19AddHandlerステートメントで、Image5がホールドされた時のイベントハンドラを追加します。イベントハンドラ内では、以下の処理を行います。
20MenuItemクラスのオブジェクト、myMenuItem1のHeaderプロパティに「各種イメージフィルタ」と指定し、MeuItemクラス型として作成したmenuItemListリストに、AddメソッドでmyMenuItem1オブジェクトを追加します。ContextMenuクラスのオブジェクトmyContextMenuオブジェクトのItemsSourceプロパティに、myMenuItemListオブジェクトを指定します。Opacityプロパティに0.7を指定し表示されるメニューの背景を半透明化しています。ContextMenuService.SetContextMenuメソッドで、Image5オブジェクトの ContextMenu プロパティの値を設定します。
21IsOpenメソッドでContextMenuを開きます。
22AddHandlerステートメントでMenuItemがクリックされた時に、myMenuItem_Clickを実行するよう指定します。
23  Protected Overrides Sub OnNavigatedTo(e As System.Windows.Navigation.NavigationEventArgs)
24    myCameraTask = New CameraCaptureTask
25    AddHandler myCameraTask.Completed, Sub(resultSender As Object, resultArgs As PhotoResult)
26              If resultArgs.TaskResult = TaskResult.OK Then
27                 myImage = New BitmapImage
28                 myImage.SetSource(resultArgs.ChosenPhoto)
29                 Image1.Source = myImage
30                 Image2.Source = myImage
31                 Image3.Source = myImage
32                 Image4.Source = myImage
33                 Image5.Source = myImage
34                 Dim wb As WriteableBitmap = New WriteableBitmap(myImage)
35                 loadImage = New ExtendedImage
36                 loadImage.SetPixels(myImage.PixelWidth, myImage.PixelHeight, wb.ToByteArray())
37  
38                 Dim filter As Sepia
39                 filter = New Sepia
40                 filterImage = New ExtendedImage(loadImage)
41                 filter.Apply(filterImage, loadImage, New ImageTools.Rectangle(0, 0, loadImage.PixelWidth, loadImage.PixelHeight))
42                 Dim bitmap = filterImage.ToBitmap
43                 Image1.Source = bitmap
44 　              
45                 Dim filter2 As Inverter
46                 filter2 = New Inverter
47                 filterImage = New ExtendedImage(loadImage)
48                 filter2.Apply(filterImage, loadImage, New ImageTools.Rectangle(0, 0, loadImage.PixelWidth, loadImage.PixelHeight))
49                 Dim bitmap2 = filterImage.ToBitmap
50                 Image2.Source = bitmap2
51  
52                 Dim filter3 As Grayscale
53                 filter3 = New GrayscaleRMY
54                 filterImage = New ExtendedImage(loadImage)
55                 filter3.Apply(filterImage, loadImage, New ImageTools.Rectangle(0, 0, loadImage.PixelWidth, loadImage.PixelHeight))
56                 Dim bitmap3 = filterImage.ToBitmap
57                 Image3.Source = bitmap3
58  
59                 Dim filter4 As Brightness
60                 filter4 = New Brightness(50)
61                 filterImage = New ExtendedImage(loadImage)
62                 filter4.Apply(filterImage, loadImage, New ImageTools.Rectangle(0, 0, loadImage.PixelWidth, loadImage.PixelHeight))
63                 Dim bitmap4 = filterImage.ToBitmap
64                 Image4.Source = bitmap4
65  
66          AddHandler Image5.Hold, Sub(imageSender As Object, imageArgs As System.Windows.Input.GestureEventArgs)
67   
68            myMenuItem1.Header = "各種イメージフィルタ"
69            menuItemList.Add(myMenuItem1)
70            myContextMenu.ItemsSource = menuItemList
71            myContextMenu.Opacity = 0.7
72            ContextMenuService.SetContextMenu(Image5, myContextMenu)
73            myContextMenu.IsOpen = True
74          End Sub
75  
76          AddHandler myMenuItem1.Click, AddressOf myMenuItem_Click
77        Else
78          Exit Sub
79        End If
80      End Sub
81        MyBase.OnNavigatedTo(e)
82    End Sub

「カメラで撮った写真に各種フィルタをかける」サンプルプログラム

3040_1.zip

著者

PROJECT KySS

この著者の記事一覧この著者の
記事一覧

四国の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/