如何在WPF中保存从右到左布局的Canvas为图片？

我尝试将WPF中的Canvas保存为图片，使用了网上找到的以下代码：

RenderTargetBitmap rtb = new RenderTargetBitmap((int)canvas.RenderSize.Width,
    (int)canvas.RenderSize.Height, 96d, 96d, System.Windows.Media.PixelFormats.Default);
rtb.Render(canvas);

var crop = new CroppedBitmap(rtb, new Int32Rect(50, 50, 250, 250));

BitmapEncoder pngEncoder = new PngBitmapEncoder();
pngEncoder.Frames.Add(BitmapFrame.Create(crop));

using (var fs = System.IO.File.OpenWrite("logo.png"))
{
    pngEncoder.Save(fs);
}

但发现当Canvas设置为**从右到左（FlowDirection.RightToLeft）**布局时，保存的图片会完全翻转，对比效果如下：

解决办法 #

方案1：临时切换布局方向

渲染前将Canvas的FlowDirection临时改为LeftToRight，渲染完成后恢复原设置，这样渲染结果会和Canvas显示一致：

// 保存原始布局方向
var originalFlowDir = canvas.FlowDirection;
try
{
    // 临时切换为左到右布局
    canvas.FlowDirection = FlowDirection.LeftToRight;

    RenderTargetBitmap rtb = new RenderTargetBitmap((int)canvas.RenderSize.Width,
        (int)canvas.RenderSize.Height, 96d, 96d, System.Windows.Media.PixelFormats.Default);
    rtb.Render(canvas);

    var crop = new CroppedBitmap(rtb, new Int32Rect(50, 50, 250, 250));

    BitmapEncoder pngEncoder = new PngBitmapEncoder();
    pngEncoder.Frames.Add(BitmapFrame.Create(crop));

    using (var fs = System.IO.File.OpenWrite("logo.png"))
    {
        pngEncoder.Save(fs);
    }
}
finally
{
    // 恢复原始布局方向
    canvas.FlowDirection = originalFlowDir;
}

方案2：对渲染结果进行水平翻转

如果不想修改Canvas的布局状态，可以通过TransformedBitmap对渲染后的图片进行水平翻转，修正方向：

RenderTargetBitmap rtb = new RenderTargetBitmap((int)canvas.RenderSize.Width,
    (int)canvas.RenderSize.Height, 96d, 96d, System.Windows.Media.PixelFormats.Default);
rtb.Render(canvas);

// 水平翻转图片，以中心为原点
var flippedBitmap = new TransformedBitmap(rtb, new ScaleTransform(-1, 1, rtb.Width / 2, 0));

var crop = new CroppedBitmap(flippedBitmap, new Int32Rect(50, 50, 250, 250));

BitmapEncoder pngEncoder = new PngBitmapEncoder();
pngEncoder.Frames.Add(BitmapFrame.Create(crop));

using (var fs = System.IO.File.OpenWrite("logo.png"))
{
    pngEncoder.Save(fs);
}

方案对比 #

• 方案1：逻辑简单，渲染结果完全匹配Canvas显示效果，适合大多数场景。
• 方案2：无需修改Canvas的运行状态，适合不能临时改变布局的特殊场景。

内容的提问来源于stack exchange，提问作者davood faezian