タッチで領域指定したエリア選択枠で写真を切り出す（XAML2行+C#6行）

#wp7dev_jp #wpdev_jp

あとは、枠をもとに画像を切り取るだけです。枠をもとに、といっても座標とサイズを使うだけですけどね。

画像の切り取り

プログラムで画像を切り取るにはどうしたらいいでしょう？これには2つの加工が必要です。

この時に使うのは、WriteableBitmap です。Image → WriteableBItmap で切り取りながら画像生成 → 例えば Imageに戻す

処理の流れ（と使うメソッド）はこんな感じですね。

XAML

結果を表示する Image と、切り出しのボタンを配置します。

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <Grid Background="Transparent"

：

    </Grid>

    <Image HorizontalAlignment="Left"  Stretch="None" Name="resultImg"

            VerticalAlignment="Top" />

    <Button Content="Crop" Margin="0,520,0,0" Click="button1_Click" />

</Grid>

あとはボタンを押した時の処理ですね。

あとは、切り抜いた画像に合わせて Image コントロールのサイズを調整して、Image コントロールに切り抜いた WriteableBitmap を渡すだけです。

 private void button1_Click(object sender, RoutedEventArgs e)

    WriteableBitmap wb = new WriteableBitmap(

        (int)rectangle1.Width, (int)rectangle1.Height);

    wb.Render(photo, new TranslateTransform {

        X = - rectangle1.Margin.Left ,

        Y = - rectangle1.Margin.Top });

    wb.Invalidate();

    resultImg.Width = rectangle1.Width;

    resultImg.Height = rectangle1.Height;

    resultImg.Source = wb;

この処理にって何かに似ているなーと思ったら、証明写真用のカッターでした。

証明写真用ダイカッター（耐久使用型）

さて、結果です

選択して、移動して、Crop ボタンで左上に結果表示されます。

ね？かんたんでしょ？

関連情報

Additional resources