How Can I save a transformed image and crop to Canvas border?

See more:

C#

XAML

WPF

Blend

I am writing an application that needs to do some touch-based image manipulation (zoom, rotate, pan). Once the user has touch-manipulated the image to there likening, they need to be able to capture there canvas view exactly as they see it by clicking a button. Ultimately this captured view will be saved to disk. Where I get fuzzy is figuring out how to crop the image to the canvas border when the image can potentially be transformed outside the canvas view. I am still pretty new to WPF so any help you guys can give me would be appreciated.

Here is my code so far:

XAML

<Window x:Class="TouchImageEditor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="800" Width="1200">


    <Window.Resources>
        <BitmapImage x:Key="masterImage" UriSource="Images/flower.bmp"/>
    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Border Height="506" Width="506" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="3" BorderBrush="blue" Grid.Column="0"  >
            <Canvas x:Name="SourceImageCanvas" Grid.Column="0" HorizontalAlignment="Center" ClipToBounds="True" VerticalAlignment="Center" Height="500" Width="500" >
                <Image x:Name="xRayImage" Source="{StaticResource masterImage}" RenderTransform="1 0 0 1 0 0"  IsManipulationEnabled="True" Height="500" Width="500" />
            </Canvas>
        </Border>

        <Border HorizontalAlignment="Center" Height="406" Width="406" VerticalAlignment="Center"   Grid.Column="3"  BorderThickness="3" BorderBrush="Red" >
            <Canvas x:Name="OutputImageCanvas" Height="400" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Image x:Name="ReferenceImage" Height="420" Width="420" RenderTransform="1 0 0 1 0 0" IsManipulationEnabled="False"  />
            </Canvas>
        </Border>

        <Button x:Name="CaptureButton" TouchDown="CaptureButton_TouchDown" Height="50" Width="50" Content="Capture" Grid.Column="1" Grid.ColumnSpan="2" Margin="28,360,543,359" />

    </Grid>
</Window>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TouchImageEditor
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        protected override void OnManipulationStarting(ManipulationStartingEventArgs args)
        {
            args.ManipulationContainer = this;

            // Adjust Z-order
            FrameworkElement element = args.Source as FrameworkElement;
            Panel pnl = element.Parent as Panel;

            for (int i = 0; i < pnl.Children.Count; i++)
                Panel.SetZIndex(pnl.Children[i],
                    pnl.Children[i] == element ? pnl.Children.Count : i);

            args.Mode = ManipulationModes.All;
            args.Handled = true;
            base.OnManipulationStarting(args);
        }

        protected override void OnManipulationDelta(ManipulationDeltaEventArgs args)
        {
            UIElement element = args.Source as UIElement;

            if (element is Image)
            {

                MatrixTransform xform = element.RenderTransform as MatrixTransform;
                Matrix matrix = xform.Matrix;
                ManipulationDelta delta = args.DeltaManipulation;

                Point center = new Point();

                center.X = args.ManipulationOrigin.X / 2;
                center.Y = args.ManipulationOrigin.Y / 2;


                matrix.ScaleAt(delta.Scale.X, delta.Scale.Y, center.X, center.Y);
                matrix.RotateAt(delta.Rotation, center.X, center.Y);
                matrix.Translate(delta.Translation.X, delta.Translation.Y);
                xform.Matrix = matrix;
                base.OnManipulationDelta(args);
            }

            args.Handled = true;
        }

        private void CaptureButton_TouchDown(object sender, TouchEventArgs e)
        {

        }


    }
}