PR

画像の任意の部分をトリミングして保存するプログラムを作る

2013年2月13日(水)
薬師寺 国安

タッチを開始した時の処理

RectangleのMarginプロパティに、タッチした位置に合わせてRectangleを移動した位置を指定します。Marginプロパティの書式は下記の通りです。

FrameworkElement.Margin(left,,top, right, buttom)

たとえばMargin=”10”は全てのプロパティが10に設定されます。またMargin=”10,20”はLeftとRightが10、TopとBottomが20に設定されたThicknessとして解釈されます。
Marginプロパティの値はNew Thickness(Left、Top、Right、Bottom)と指定します。この場合はleftにe.Position.Xを、topにe.Position.Yの値を指定しています。

RectangleのWidthとHeightを0で初期化します。非表示になっていたRectangleを表示します。

  Private Sub ContentPanel_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs) Handles ContentPanel.ManipulationStarted
    Rectangle1.Margin = New Thickness(e.Position.X, e.Position.Y, 0, 0)
    Rectangle1.Width = 0
    Rectangle1.Height = 0
    Rectangle1.Visibility = Windows.UI.Xaml.Visibility.Visible
  End Sub

矩形上でドラッグした時の処理

矩形の位置をドラッグした移動量分だけ動かします。e.Delta.Translation.X、e.Delta.Translation.Yでx-y画面座標の変化を取得しています。e.Handled=Trueと指定して、Gridにイベントが伝わらないようにします。

  Private Sub Rectangle1_ManipulationDelta(sender As Object, e As ManipulationDeltaRoutedEventArgs) Handles Rectangle1.ManipulationDelta
    Rectangle1.Margin = New Thickness(Rectangle1.Margin.Left + e.Delta.Translation.X, Rectangle1.Margin.Top + e.Delta.Translation.Y, 0, 0)
    e.Handled = True
  End Sub

矩形をタッチした時の処理

e.Handled=Trueと指定して、Gridにイベントが伝わらないようにします。

  Private Sub Rectangle1_ManipulationStarted(sender As Object, e As ManipulationStartedRoutedEventArgs) Handles Rectangle1.ManipulationStarted
    e.Handled = True
  End Sub

[切り出す]ボタンがクリックされた時の処理

Rectangle(矩形)のWidthとHeightで初期化された、新しいWriteableBitmapのインスタンスmyWriteableBitmapオブジェクトを作成します。

イメージデータやファイルからデータを読み取る、FromStreamメソッドで、FileOpenPickerで指定したファイルのデータを読み取り、myCrop変数で参照しておきます。

Cropメソッドで、Rectangleで指定した領域を切り出し、WriteableBitmap型のメンバ変数mySelectedImageで参照しておきます。Cropメソッドの書式は下記の通りです

WriteableBitmap.Crop(x As Integer,y As Integer,width As Integer,height As Integer)

切り出された画像を表示するresultImageのWidthにRectangleのWidthを指定し、HeightにはRectangleのHeightの値を指定します。
SourceプロパティにmySelectedImageオブジェクトを指定します。
Invalidateメソッドでビットマップ全体を再描画します。[保存]ボタンの使用を可能にします。

非同期処理で行われるため、メソッドの先頭にAsyncを追加します。Asyncが追加されていると、その処理が非同期で行われることを意味します。

  Private Async Sub Button1_Click(sender As Object, e As RoutedEventArgs) Handles Button1.Click
    Dim myWriteableBitmap = New WriteableBitmap(CInt(Rectangle1.Width), CInt(Rectangle1.Height))
    Dim myCrop = Await myWriteableBitmap.FromStream(Await myFile.OpenReadAsync)
    mySelectedImage = myCrop.Crop(CInt(Rectangle1.Margin.Left), CInt(Rectangle1.Margin.Top), CInt(Rectangle1.Width), CInt(Rectangle1.Height))
    resultImage.Width = Rectangle1.Width
    resultImage.Height = Rectangle1.Height
    resultImage.Source = mySelectedImage
    mySelectedImage.Invalidate()
    saveButton.IsEnabled = True
  End Sub

[画像選択]ボタンがクリックされた時の処理

Rectangleを非表示にし、切り出され表示されていた画像を消去します。画像を選択するSelectImageプロシージャを実行します。

  Private Sub imageSelectButton_Click(sender As Object, e As RoutedEventArgs) Handles imageSelectButton.Click
    Rectangle1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
    resultImage.Source = Nothing
    SelectImage()
  End Sub

[保存]ボタンがクリックされた時の処理

切り出されたされた画像(mySelectedImage)のストリームを取得し、FlushAsyncメソッドで、ストリームに対応する全てのバッファを非同期にクリアし、バッファ内のデータを基となるデバイスに書き込みます。

切り出された画像のストリームの長さで初期化された、バイト配列のオブジェクトmyPixelを作成します。ReadAsyncメソッドで、現在のストリームからバイトシーケンスを非同期的に読み取り、読み取ったバイト数だけストリームの位置を進めます。

インデックスとなる変数offSetを宣言します。切り出された画像の高さ(Pixelheight)と幅(PixelWidth)に対して、反復処理を行います。offSet変数には、4ビットを乗算したバイト型の配列変数myPixelの、インデックスになる値を格納します。

バイト型のBRGA(青、赤、緑、アルファ)変数に、ピクセルのバイト数を転送し、offSetに対応するmyPixelバイト変数にRGBAの値を指定します。この画像処理を行わないと、保存する画像が実際の画像の色と異なって保存されますので、注意してください。

ピクチャライブラリのサブフォルダーCutImageにアクセスします。CreateFileAsyncメソッドで、「年月日時間分秒.png」ファイルを作成します。CreateFileAsyncメソッドは、フォルダーまたはファイルグループに新規ファイルを作成するメソッドです。

OpenAsyncメソッドで読み取りと書き込み可能な状態で、作成したPNG画像を開きます。OpenAsyncメソッドは、ファイルのランダムアクセスストリームを開くメソッドです。

イメージデータの作成、編集、保存に使用されるイメージエンコーダーを含む、BitmapEncoderクラス用の変数myEncoderを宣言します。CreateAsyncメソッドで、指定済みコーデックのために新しいBitmapEncoderを非同期的に作成し、ストリーム上でこれを初期化します。CreateAsyncメソッドには、「指定したエンコーダーのCLSID」と「ストリームのイメージファイルが書き込まれる場所」を指定します。ここでは、「指定したエンコーダーのCLSID」には、BitmapEncoder.PngEncoderIdを、「ストリームのイメージファイルが書き込まれる場所」にはmyFileStreamを指定しています。

BitmapEncoderクラスのSetPixelDataメソッドで、引数で指定されたパラメーターを使用して、フレームビットマップピクセルデータを指定します。SetPixelDataの書式は下記の通りです。

BitmapEncoder.SetPixelData(ピクセルデータのピクセル形式,ピクセルデータのアルファモード,ピクセルの幅,ピクセルの高さ, 水平方向の解像度のドット/インチ、ピクセル データ(通常96), 垂直方向の解像度のドット/インチ、ピクセル データ(通常96),ピクセルデータ)

BitmapEncoderのFlushAsyncメソッドで、非同期的に現在のフレームデータをコミットし、イメージファイルのデータ全てをフラッシュします。切り出された画像が保存されます。

保存した旨のメッセージを表示します。

非同期処理で行われるため、メソッドの先頭にAsyncを追加します。Asyncが追加されていると、その処理が非同期で行われることを意味します。

  Private Async Sub saveButton_Click(sender As Object, e As RoutedEventArgs) Handles saveButton.Click
    Using myStream As Stream = mySelectedImage.PixelBuffer.AsStream
      Await myStream.FlushAsync()
  
      Dim myPixel As Byte() = New Byte(CInt(myStream.Length - 1)) {}
      Await myStream.ReadAsync(myPixel, 0, myPixel.Length - 1)
      Dim offSet As Integer
 
      For row As Integer = 0 To CInt(CUInt(mySelectedImage.PixelHeight) - 1)
        For col As Integer = 0 To CInt(CUInt(mySelectedImage.PixelWidth) - 1)
          offSet = CInt((row * CUInt(mySelectedImage.PixelWidth) * 4) + (col * 4))
          Dim B As Byte = myPixel(offSet)
          Dim G As Byte = myPixel(offSet + 1)
          Dim R As Byte = myPixel(offSet + 2)
          Dim A As Byte = myPixel(offSet + 3)
          myPixel(offSet) = R
          myPixel(offSet + 1) = G
          myPixel(offSet + 2) = B
          myPixel(offSet + 3) = A
        Next
      Next
 
      Dim myFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
      Dim SubFolder = Await myFolder.CreateFolderAsync("CutImage", CreationCollisionOption.OpenIfExists)
      Dim mySaveFile As StorageFile = Await SubFolder.CreateFileAsync(DateTime.Now.ToString("yyyyMMddHHmmss") & ".png")
      Using myFileStream As IRandomAccessStream = Await mySaveFile.OpenAsync(FileAccessMode.ReadWrite)
        Dim myEncoder As BitmapEncoder = Await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, myFileStream)
        myEncoder.SetPixelData(BitmapPixelFormat.Rgba8, BitmapAlphaMode.Premultiplied, CUInt(mySelectedImage.PixelWidth), CUInt(mySelectedImage.PixelHeight), 96, 96, myPixel)
        Await myEncoder.FlushAsync
      End Using
      Dim myMessage As New MessageDialog("保存しました。")
      Await myMessage.ShowAsync
    End Using
  End Sub
End Class

今回はここまでです。ありがとうございました。

Think IT会員限定特典
  • 任意の画像をトリミングして保存するWindowsアプリ

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

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

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

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

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