Question

对于初学者来说，我还是UWP和XAML的新手。我在我的uwp上创建了一个简单的代码，我有一个画布（名为＆＃34; ImageHolder＆＃34;），里面有一个图像和文本块。我的主要问题是每当我尝试使用RenderTargetBitmap将画布保存到图像文件中时，它会输出一个黑色的空白图像。这是我的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

这是因为你的前景是黑色的，这是渲染黑色背景，这将起作用 -

FOR JPEG

<强> 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" />

我从画布上删除了按钮，因为你正在使用负边距，当你捕获它时，它会超出你的画布蚂蚁或保存它呈现深黑色背景所以如果你想要按钮就可以将按钮放在画布内

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

FOR PNG（Bonus）

XAML - ＆gt; 您的常规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();
     }
}

将画布保存到图像文件可以保存空白的黑色图像

1 个答案: