画像ファイルにキャンバスを保存すると空白の黒い画像が保存されます

Question

私はまだUWPとXAMLで新しいです。 キャンバス（「ImageHolder」という名前の）があり、その内部にイメージとテキストブロックがある、私のuwpで簡単なコードを作った。 私の主な問題は、RenderTargetBitmap inorderを使用してキャンバスを画像ファイルに保存しようとするたびに、黒い空白の画像が出力されることです。ここで は私のXAMLコードです：

<Page 
x:Class="SaveAndRetreiveMap.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:SaveAndRetreiveMap" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml" 
mc:Ignorable="d"> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

    <Line x:Name="dot" Stroke="Black" StrokeThickness="5" Fill="Black"></Line> 

    <TextBox x:Name="xValue" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="89,415,0,0" Background="Azure"/> 
    <TextBox x:Name="yValue" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="89,452,0,0" Background="Azure"/> 
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="55,420,0,0" TextWrapping="Wrap" Text="X:" VerticalAlignment="Top" FontSize="20"/> 
    <TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Margin="55,455,0,0" TextWrapping="Wrap" Text="Y:" VerticalAlignment="Top" FontSize="20"/> 
    <Button x:Name="PlotButton" Content="Plot Points" HorizontalAlignment="Left" Margin="62,496,0,0" VerticalAlignment="Top" Click="PlotButton_Click"/> 

    <Canvas Name="ImageHolder" Height="206" Width="226" Margin="356,160,918,634"> 

     <Image x:Name="image" HorizontalAlignment="Left" Height="206" VerticalAlignment="Top" Width="226"/> 
     <TextBlock Text="Johnny!" Margin="44,89,-44,-89"></TextBlock> 
     <Button x:Name="button" Content="Save" HorizontalAlignment="Left" VerticalAlignment="Top" Click="button_Click" Canvas.Left="-133" Canvas.Top="335"/> 
    </Canvas> 
</Grid> 

私のCSコード：

 private async void button_Click(object sender, RoutedEventArgs e) 
     { 
     RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap(); 
     await renderTargetBitmap.RenderAsync(ImageHolder); 

     var picker = new FileSavePicker(); 
     picker.FileTypeChoices.Add("JPEG Image", new string[] { ".jpg" }); 
     StorageFile file = await picker.PickSaveFileAsync(); 
     if (file != null) 
     { 
      var pixels = await renderTargetBitmap.GetPixelsAsync(); 

      using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite)) 
      { 
       var encoder = await 

       BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream); 
       byte[] bytes = pixels.ToArray(); 
       encoder.SetPixelData(BitmapPixelFormat.Bgra8, 
            BitmapAlphaMode.Ignore, 
            (uint)ImageHolder.Width, (uint)ImageHolder.Height, 
            96, 96, bytes); 

       await encoder.FlushAsync(); 
      } 
     } 
    } 

出力

私は、UWPではまだ本当に新しいですよ小さな助け本当に感謝します。 :)それはあなたのフォアグラウンドによるものである

Answer 1

は、あなた、これは黒い背景をレンダリングしている黒で、これは動作します -

をJPEG

FOR XAML

<Canvas Name="ImageHolder" Height="260" Width="260"> 
     <Canvas.Background> 
      <SolidColorBrush Color="White"/> 
     </Canvas.Background> 

     <Image x:Name="image" HorizontalAlignment="Left" Height="206" VerticalAlignment="Top" Width="226"/> 
     <TextBlock Text="Johnny!" Margin="44,89,-44,-89"></TextBlock> 

    </Canvas> 
    <Button x:Name="button" Background="Gray" Content="Save" HorizontalAlignment="Left" VerticalAlignment="Top" Click="button_Click" /> 

を私は削除しましたあなたがそれをキャプチャしたり保存したりするときにキャンバスアリの外にある負のマージンを使用しているためキャンバスからのボタンです。暗い黒の背景をレンダリングします。 Oキャンバス内の場所ボタンPNG（ボーナス）

FOR

C＃

private async void button_Click(object sender, RoutedEventArgs e) 
{ 
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap(); 
    await renderTargetBitmap.RenderAsync(ImageHolder); 

    var pixelBuffer = await renderTargetBitmap.GetPixelsAsync(); 
    var pixels = pixelBuffer.ToArray(); 
    var displayInformation = DisplayInformation.GetForCurrentView(); 
    var picker = new FileSavePicker(); 
    picker.FileTypeChoices.Add("JPEG Image", new string[] { ".jpg" }); 
    StorageFile file = await picker.PickSaveFileAsync(); 
    using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite)) 
    { 
     var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream); 
     encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)renderTargetBitmap.PixelWidth, (uint)renderTargetBitmap.PixelHeight, displayInformation.RawDpiX, displayInformation.RawDpiY, pixels); 
     await encoder.FlushAsync(); 
    } 
} 

XAML- XAML以上>あなたの定期的な

理由あなたはいつもトラン任意のマージンに関係なく親の背景

private async void button_Click(object sender, RoutedEventArgs e) 
{ 
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap(); 
    await renderTargetBitmap.RenderAsync(ImageHolder); 

    var pixelBuffer = await renderTargetBitmap.GetPixelsAsync(); 
    var pixels = pixelBuffer.ToArray(); 
    var displayInformation = DisplayInformation.GetForCurrentView(); 
    var picker = new FileSavePicker(); 
    picker.FileTypeChoices.Add("PNG Image", new string[] { ".png" }); 
    StorageFile file = await picker.PickSaveFileAsync();    
    using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite)) 
    { 
     var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream); 
     encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Premultiplied, (uint)renderTargetBitmap.PixelWidth, (uint)renderTargetBitmap.PixelHeight, displayInformation.RawDpiX, displayInformation.RawDpiY, pixels); 
     await encoder.FlushAsync(); 
    } 
}