(UWP) 在图像上绘图并再次保存为 image/byte 数组

Question

这两天我尝试了很多不同的解决方案，但似乎找不到最好的方法。

我想要的是：

1. Show image
2. Enable drawing red lines on image
3. Save image with lines

我已经尝试过 Win2D、WriteableBitmapEx、InkCanvas、普通 Canvas 和 Lumia Imaging SDK，但没有找到可行的解决方案。我做错的可能性很大，因为所有这些解决方案都不适合我。不过，我似乎找不到任何适用于 UWP 的好例子。任何人都知道一个简单易行的方法吗？

编辑：我正在用 C# 开发

Answer 1

1) 第一种解决方案是使用DX。您可以使用 Direct2D 和 DirectWrite 渲染到屏幕，然后使用 WIC API 将渲染图像保存到磁盘。如果您正在编写 Windows 应用商店应用程序，您可以让用户 select 使用 Windows::Storage::Pickers::FileSavePicker 一个目标文件。 Here你可以找到一个示例程序。

更完整的在UWP中使用DX渲染或保存图片的示例，可以参考here。

2) 如果你想使用纯c#，win2D是direct2D的一个很好的包装器，它可以用来绘制图像。借助 RenderTargetBitmap，您可以将任意 UIElement 渲染为位图。关于 RenderTargetBitmap，这里是 MSDN paper, and here 是很好的示例。

对于您的情况，代码可能如下所示（您可以稍后保存到文件）：

XAML:

<StackPanel>
    <Button Content="Save as image source" Click="SaveImageSource_Click" />
    <Grid x:Name="RenderedGrid" Height="500"  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <canvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>
    <Image x:Name="RenderedImage" Stretch="None" />
    </Grid>
</StackPanel>

C#:

private  void CanvasControl_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
    args.DrawingSession.DrawEllipse(155, 155, 80, 30, Colors.Black, 3);
    args.DrawingSession.DrawLine(155, 155, 180, 180, Colors.Red);
}

private async void SaveImageSource_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(RenderedGrid, 500, 500);
    RenderedImage.Source = renderTargetBitmap;
}

如有不明之处请告诉我。

(UWP) 在图像上绘图并再次保存为 image/byte 数组

(UWP) Drawing on image and saving as image/byte array again

mobile

drawing

image

bitmap

uwp