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의 내용을 캡처 할 수 없습니다. 그리고 API가 없기 때문에 같은 이미지가 첨부 된 InkCanvas을 직접 캡처 할 수있는 것처럼 보입니다. 하지만 Win2D을 사용할 수 있습니다. 자세한 내용은 this thread을 참조하십시오.

DrawImage 메서드를 사용하면 DrawInk 메서드를 모두 사용하여 CanvasDevice에 그려서 사진과 획을 함께 저장할 수 있습니다. 예를 들면 :

<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(); 
}