UWP：InkCanvasに画像を添付するにはどうすればよいですか？

Question

カメラで写真を撮ったり、ファイルからキャンバスに読み込んだりする必要があります。このキャンバスは、フォルダに保存した後にその上に何かを強調表示するために編集する必要があります。

今のとして、私はこれを使用します。

<Grid x:Name="grid"> 
    <Image Source="/Assets/stainless-images-110606.jpg" x:Name="ImageToEdit" Stretch="Uniform" /> 
    <StackPanel Background="LightGreen" Width="700" Height="700" x:Name="StackPanel"> 
     <InkCanvas x:Name="MyInkCanvas" Width="{Binding Width, ElementName=StackPanel}" Height="{Binding Height, ElementName=StackPanel}"/> 
    </StackPanel> 
    <InkToolbar TargetInkCanvas="{x:Bind MyInkCanvas}" Name="inkToolbar"/> 
    <Button Content="Save" Click="Button_Click" HorizontalAlignment="Right"/> 
</Grid> 

をそして、これは私がXAMLから全体のものを取得する方法である：

public static async Task<IRandomAccessStream> RenderToRandomAccessStream(this UIElement element) 
{ 
    RenderTargetBitmap rtb = new RenderTargetBitmap(); 
    await rtb.RenderAsync(element); 

    var pixelBuffer = await rtb.GetPixelsAsync(); 
    var pixels = pixelBuffer.ToArray(); 

    // Useful for rendering in the correct DPI 
    var displayInformation = DisplayInformation.GetForCurrentView(); 

    var stream = new InMemoryRandomAccessStream(); 
    var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream); 
    encoder.SetPixelData(BitmapPixelFormat.Bgra8, 
         BitmapAlphaMode.Premultiplied, 
         (uint)rtb.PixelWidth, 
         (uint)rtb.PixelHeight, 
         displayInformation.RawDpiX, 
         displayInformation.RawDpiY, 
         pixels); 

    await encoder.FlushAsync(); 
    stream.Seek(0); 

    return stream; 
} 

私は私がイメージソースを設定するカメラから写真を取り込みます写真を保存するときには、すべてのものを保存するときに、キャンバスからのストロークではなく写真のみを保存します。私の前提は、カメラからinkCanvasに渡されたストリームを何らかの形で添付しなければならないということです。 RenderTargetBitmapクラスの「XAMLビジュアルとRenderTargetBitmapキャプチャ機能」によると

Answer 1

：キャプチャすることはできません

コンテンツは、撮影した画像のように空白表示されますが、同じビジュアルツリー内の他のコンテンツができますキャプチャされ、レンダリングされます（キャプチャできないコンテンツの存在がそのXAMLコンポジションのキャプチャ全体を無効にすることはありません）。

したがって、InkCanvasの内容はキャプチャできません。そして、画像が同時に添付されたInkCanvasを直接キャプチャできるAPIがないようです。しかし、Win2Dを使うことができます。詳細はthis threadを参照してください。

DrawImageメソッドを使用すると、CanvasDeviceに両方を描画するDrawInkメソッドを組み合わせて、写真とストロークを一緒に保存できます。たとえば、次のように背後

<StackPanel Padding="30" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid> 
     <Image 
      x:Name="imgbackground" 
      Source="/Assets/ob_0_0.png" 
      Stretch="None" /> 
     <InkCanvas x:Name="ink" /> 
    </Grid> 
    <StackPanel Orientation="Horizontal"> 
     <Button 
      x:Name="btnUpdate" 
      Margin="10" 
      Click="btnUpdate_Click" 
      Content="update ink size, click me firstly" /> 
     <Button 
      Margin="10" 
      Click="BtnSave_Click" 
      Content="Save" /> 
    </StackPanel> 
</StackPanel> 

コード：

BitmapImage inkimage; 
public MainPage() 
{ 
    this.InitializeComponent(); 
    ink.InkPresenter.InputDeviceTypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch; 
    var attr = new InkDrawingAttributes(); 
    attr.Color = Colors.Red; 
    attr.IgnorePressure = true; 
    attr.PenTip = PenTipShape.Circle; 
    attr.Size = new Size(4, 10); 
    ink.InkPresenter.UpdateDefaultDrawingAttributes(attr); 
} 

private async void BtnSave_Click(object sender, RoutedEventArgs e) 
{    
    StorageFile inputFile = await StorageFile.GetFileFromApplicationUriAsync(inkimage.UriSource); 
    CanvasDevice device = CanvasDevice.GetSharedDevice(); 
    CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)ink.ActualWidth, (int)ink.ActualHeight, 96); 
    using (var ds = renderTarget.CreateDrawingSession()) 
    { 
     ds.Clear(Colors.White); 
     var image = await CanvasBitmap.LoadAsync(device, inputFile.Path, 96); 
     ds.DrawImage(image);// Draw image firstly 
     ds.DrawInk(ink.InkPresenter.StrokeContainer.GetStrokes());// Draw the stokes 
    } 

    //Save them to the output.jpg in picture folder 
    StorageFolder storageFolder = KnownFolders.SavedPictures; 
    var file = await storageFolder.CreateFileAsync("output.jpg", CreationCollisionOption.ReplaceExisting); 
    using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite)) 
    { 
     await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f); 
    } 
} 

private void btnUpdate_Click(object sender, RoutedEventArgs e) 
{ 
    //Get the image source that for attaching to the inkcanvas, update the inkcanvas to be same size with image. 
    inkimage = (BitmapImage)imgbackground.Source; 
    var imagewidth = inkimage.PixelWidth; 
    var imageheight = inkimage.PixelWidth; 
    ink.Height = imageheight; 
    ink.Width = imagewidth; 
    ink.UpdateLayout(); 
}