Blog スタッフブログ

WPF システム開発

[WPF][C#]InkCanvasを画像で保存する

システム開発担当のTFです。

やり方

  • レイアウトにInkCanvasを設置する
  • InkCanvasを取得し、描かれた物を画像として保存する

参考

　　キャンバスに描いた絵を画像ファイルとして保存する
　　WPFのInkCanvasを画像ファイルとして保存する方法

サンプル

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition Height="*" />
		<RowDefinition Height="60" />
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
  <!-- InkCanvasの設置 -->
	<InkCanvas Name="InkCanvas" Grid.Row="0" Grid.Column="0"/>

	<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0">
		<Button Content="OK" Width="75" Height="40" Click="OK_Button_Click" />
		<Button Content="キャンセル" Width="75" Height="40" Margin="20,0,20,0" Click="Cancel_Button_Click"/>
	</StackPanel>
</Grid>
// unixタイム
Int32 unixTimestamp = (Int32)(DateTime.Now.Subtract(new DateTime(1970, 1, 1))).TotalSeconds;
String filePath = unixTimestamp.ToString() + ".jpg";

SaveCanvas(InkCanvas, filePath);

private static void SaveCanvas(UIElement element, String filePath)
{

	var bounds = VisualTreeHelper.GetDescendantBounds(element);
	var width = (int)bounds.Width;
	var height = (int)bounds.Height;

	// 描画先
	var drawingVisual = new DrawingVisual();
	using (var ctx = drawingVisual.RenderOpen())
	{
		var vb = new VisualBrush(element);
		ctx.DrawRectangle(vb, null, new Rect(new System.Windows.Point(bounds.X, bounds.Y), new System.Windows.Point(width, height)));
	}

	// ビットマップに変換
	var rtb = new RenderTargetBitmap(width, height, 96d, 96d, PixelFormats.Pbgra32);
	rtb.Render(drawingVisual);

	// エンコーダー
	BitmapEncoder encoder = new JpegBitmapEncoder();
	encoder.Frames.Add(BitmapFrame.Create(rtb));
	
	// ファイル保存
	using (var fs =File.Create(filePath))
	{
		encoder.Save(fs);
	}
}
戻る一覧へ戻る