从画布保存的图像未正确呈现答案

【问题标题】：Image being saved from canvas is not rendered properly从画布保存的图像未正确呈现
【发布时间】：2015-06-16 22:37:41
【问题描述】：

我正在尝试使用以下代码将 myCanvas 的内容保存为图库中的图像文件（对于 Windows Phone 8.1，而不是 Silverlight）。当我运行应用程序时，图像被保存但它被扭曲了。我究竟做错了什么？我已经上传了生成的图像和预期的结果。

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

canvas 的 XAML 代码如下：

<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>

【问题讨论】：

标签： c# image canvas windows-phone-8.1 windows-rt

【解决方案1】：

SetPixelData 方法的参数不正确。

encoder.SetPixelData(BitmapPixelFormat.Bgra8,
                         BitmapAlphaMode.Ignore,
                         (uint)element.Width, (uint)element.Height,
                         96, 96, bytes);

将它们更改为以下可以使其工作。

encoder.SetPixelData(BitmapPixelFormat.Bgra8,
                BitmapAlphaMode.Ignore,
                (uint)renderTargetBitmap.PixelWidth,
                (uint)renderTargetBitmap.PixelHeight,
                DisplayInformation.GetForCurrentView().LogicalDpi,
                DisplayInformation.GetForCurrentView().LogicalDpi,
                bytes);

您可以从 MSDN 下载XAML render to bitmap sample 以供参考。

【讨论】：