图片正在从帆布不正确呈现保存 [英] Image being saved from canvas is not rendered properly
问题描述
我尝试使用下面的代码myCanvas的内容保存为库中的图像文件(适用于Windows Phone的8.1,而不是Silverlight的)。当我运行应用程序,将图像保存,但它是扭曲的。我究竟做错了什么?我已上载所产生的图象和预期的结果。
公共异步无效SaveFileToPhone()
{
var文件=等待KnownFolders .PicturesLibrary.CreateFileAsync(bug.png,CreationCollisionOption.GenerateUniqueName);
等待SaveVisualElementToFile(myCanvas,文件);
}
异步任务SaveVisualElementToFile(FrameworkElement的元素,StorageFile文件)
{
变种renderTargetBitmap =新RenderTargetBitmap();
等待renderTargetBitmap.RenderAsync(元素,(INT)element.Width,(INT)element.Height);
VAR像素=等待renderTargetBitmap.GetPixelsAsync();
txt_bug.Text =宽度:+(INT)element.Width +高度:+(INT)element.Height;使用
(IRandomAccessStream流=等待file.OpenAsync(FileAccessMode.ReadWrite))
{
变种编码器=等待
BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId,流) ;
字节[]字节= pixels.ToArray();
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(UINT)element.Width,(UINT)element.Height,
96,96,字节);
等待encoder.FlushAsync();
}
}
画布的XAML代码如下:
<帆布X:NAME =myCanvas背景=#FF33FFE3保证金=25,75,26,10
在ManipulationStarted =myCanvas_ManipulationStarted
在ManipulationCompleted =myCanvas_ManipulationCompleted
在ManipulationDelta =myCanvas_ManipulationDeltaManipulationMode =所有
螺纹=myCanvas_Tapped了minHeight =555了minWidth =350 WIDTH =350HEIGHT =555>
< Canvas.Clip>
< RectangleGeometry矩形=0 0 350 555/>
< /Canvas.Clip>
< /帆布>
的PARAMS到 SetPixelData
方法是不正确的。
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore ,
(UINT)element.Width,(UINT)element.Height,
96,96,字节);
其更改为后续可以使它正常工作。
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(UINT)renderTargetBitmap.PixelWidth,
(UINT)renderTargetBitmap.PixelHeight ,
DisplayInformation.GetForCurrentView()LogicalDpi,
DisplayInformation.GetForCurrentView()LogicalDpi,
字节)。;
您也可以下载的 XAML渲染到从MSDN样本位图,以供参考。
I'm trying to use the following code to save the contents of myCanvas as an image file in the gallery (for Windows Phone 8.1, not Silverlight). When I run the App, the image is saved but it is distorted. What am I doing wrong? I have uploaded the resultant image and the expected result.
public async void SaveFileToPhone()
{
var file = await KnownFolders.PicturesLibrary.CreateFileAsync("bug.png", CreationCollisionOption.GenerateUniqueName);
await SaveVisualElementToFile(myCanvas, file);
}
async Task SaveVisualElementToFile(FrameworkElement element, StorageFile file)
{
var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(element, (int)element.Width, (int)element.Height);
var pixels = await renderTargetBitmap.GetPixelsAsync();
txt_bug.Text = "Width: " + (int)element.Width + " Height:" + (int)element.Height;
using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
var encoder = await
BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
byte[] bytes = pixels.ToArray();
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(uint)element.Width, (uint)element.Height,
96, 96, bytes);
await encoder.FlushAsync();
}
}
The XAML code for canvas is as follows:
<Canvas x:Name="myCanvas" Background="#FF33FFE3" Margin="25,75,26,10"
ManipulationStarted="myCanvas_ManipulationStarted"
ManipulationCompleted="myCanvas_ManipulationCompleted"
ManipulationDelta="myCanvas_ManipulationDelta" ManipulationMode="All"
Tapped="myCanvas_Tapped" MinHeight="555" MinWidth="350" Width="350" Height="555">
<Canvas.Clip>
<RectangleGeometry Rect="0 0 350 555"/>
</Canvas.Clip>
</Canvas>
The params to the SetPixelData
method are incorrect.
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(uint)element.Width, (uint)element.Height,
96, 96, bytes);
Change them to the follow can make it work.
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(uint)renderTargetBitmap.PixelWidth,
(uint)renderTargetBitmap.PixelHeight,
DisplayInformation.GetForCurrentView().LogicalDpi,
DisplayInformation.GetForCurrentView().LogicalDpi,
bytes);
You can download the XAML render to bitmap sample from MSDN for reference.
这篇关于图片正在从帆布不正确呈现保存的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!