将画布保存到图像文件保存空白黑色图像 [英] Saving Canvas to Image File saves Blank Black Image
问题描述
首先，我对 UWP 和 XAML 还是个新手.我在我的 uwp 上做了一个简单的代码，我有一个画布(命名为ImageHolder")，里面有一个图像和文本块.我的主要问题是，每当我尝试使用 RenderTargetBitmap 将画布保存到图像文件中时，它都会输出一个黑色的空白图像.这是我的 XAML 代码:
For starters, I'm still new with UWP and XAML. I've made a simple code on my uwp where I have a canvas (named it "ImageHolder") and there is an image and textblock inside it. My main problem is that whenever I try to use RenderTargetBitmap inorder to save the canvas into an image file, it outputs a black blank image. Here is my XAML code:
<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 的新手，如果能提供一点帮助，我将不胜感激.:)
I'm still really new at UWP, and a small help would really be appreciated. :)
推荐答案
这是因为你的前景是黑色的你这是渲染黑色背景，这会起作用 --
It is due to your foreground is black you this is rendering black background, this will work --
对于 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" />
我从画布上删除了按钮，因为当您捕获它或保存它时，您使用的是画布蚂蚁之外的负边距，它会呈现深黑色背景，因此如果您想在其上放置按钮，请将按钮放在画布内
i removed the button from canvas because you are using negative margin which is out of your canvas ant when you capture it or save it it renders dark black background so if you want button on it so place button inside the canvas
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();
}
}
对于 PNG(奖金)
XAML --> 您在 XAML 之上的常规
因为无论边距如何，您都将始终获得透明背景
because you will always get transparent background irrespective of any margin
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();
}
}
这篇关于将画布保存到图像文件保存空白黑色图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
