Saving canvas data to image file output is wrong

Question

Problem 1 - In your xaml for the Image, add IsEnabled="False". This will stop the clicking from hiding the child image.

<Image x:Name="SpecialPhoto" Source="IMG_0071.JPG" Height="586" Width="780"
        IsEnabled="False"
    Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Center" />

Problem 2 - I didn't experience this, maybe you have some sort of mouse acceleration turned on in windows?

Problem 3 - You are using the height for the width and the width for the height. Change:

RenderTargetBitmap renderTarget = new RenderTargetBitmap(
             (int)SpecialPhoto.Height,
             (int)SpecialPhoto.Width,
             96, 96, PixelFormats.Pbgra32);

To:

RenderTargetBitmap renderTarget = new RenderTargetBitmap(
             (int)SpecialPhoto.Width,
             (int)SpecialPhoto.Height,
             96, 96, PixelFormats.Pbgra32);

The code for the comment question you asked:

private void bSave_Click(object sender, RoutedEventArgs e)
{
    string fileLocation = System.IO.Path.GetDirectoryName(FileNmae);// get the selected file location
    string getFileName = System.IO.Path.GetFileName(FileNmae); //get the seleceted filename
    DateTime time = DateTime.Now;              // Use current time
    string format = "MMMddddHHmmssyyyy";
    string s2 = time.ToString(format) + getFileName; // add $ at front along with the folde name


    string filenamecombined = System.IO.Path.Combine(fileLocation, s2);//combine path. 

    #region Change the SpecialPhoto to be the size of its image and adjust the other images to match
    double w = SpecialPhoto.Width;
    double h = SpecialPhoto.Height;
    SpecialPhoto.Width = SpecialPhoto.Source.Width;
    SpecialPhoto.Height = SpecialPhoto.Source.Height;
    // Get the ratio of the change in width/height
    double rw = SpecialPhoto.Width / w;
    double rh = SpecialPhoto.Height / h;
    // Adjust the logos added to keep in the same relative position and size
    foreach (Image img in canvas.Children)
    {
        if (img == SpecialPhoto)
            continue;
        double left = Canvas.GetLeft(img);
        double top = Canvas.GetTop(img);
        Canvas.SetLeft(img, left * rw);
        Canvas.SetTop(img, top * rh);
        img.RenderTransform = new ScaleTransform(rw, rh);
    }
    #endregion

    RenderTargetBitmap renderTarget = new RenderTargetBitmap(
        (int)SpecialPhoto.Width,
        (int)SpecialPhoto.Height,
        96, 96, PixelFormats.Pbgra32);

    //renderTarget.Render(ViewedPhoto);
    ModifyPosition(canvas as FrameworkElement);
    renderTarget.Render(canvas);
    ModifyPositionBack(canvas as FrameworkElement);

    #region Undo the changes we did to the SpecialPhoto/logos
    SpecialPhoto.Width = w;
    SpecialPhoto.Height = h;
    foreach (Image img in canvas.Children)
    {
        if (img == SpecialPhoto)
            continue;
        double left = Canvas.GetLeft(img);
        double top = Canvas.GetTop(img);
        Canvas.SetLeft(img, left / rw);
        Canvas.SetTop(img, top / rh);
        img.RenderTransform = new ScaleTransform(1, 1);
    }
    #endregion

    JpegBitmapEncoder encoder = new JpegBitmapEncoder();
    encoder.Frames.Add(BitmapFrame.Create(renderTarget));

    //string imagePath = System.IO.Path.GetTempFileName();
    using (FileStream stream = new FileStream(filenamecombined, FileMode.Create))
    {
        encoder.Save(stream);
        stream.Dispose();
    }
}

Code for the 2nd comment question (keeping child image in the parent image):

We need to change two methods. The first method is the CanvasMouseMove:

private void CanvasMouseMove(object sender, MouseEventArgs e)
{
    if (draggedImage != null)
    {
        var position = e.GetPosition(canvas);
        var offset = position - mousePosition;
        mousePosition = position;
        double left = Canvas.GetLeft(draggedImage) + offset.X;
        double top = Canvas.GetTop(draggedImage) + offset.Y;

        Point tl = SpecialPhoto.TranslatePoint(new Point(0, 0), canvas);
        Point br = SpecialPhoto.TranslatePoint(new Point(SpecialPhoto.ActualWidth, SpecialPhoto.ActualHeight), canvas);
        if (left < tl.X)
        {
            left = tl.X;
        }
        if (top < tl.Y)
        {
            top = tl.Y;
        }
        if (left + draggedImage.ActualWidth > br.X)
        {
            left = br.X - draggedImage.ActualWidth;
        }
        if (top + draggedImage.ActualHeight > br.Y)
        {
            top = br.Y - draggedImage.ActualHeight;
        }
        Canvas.SetLeft(draggedImage, left);
        Canvas.SetTop(draggedImage, top);
    }
}

The 2nd method is the Button_Click:

private void Button_Click(object sender, RoutedEventArgs e) // To load another image
{
    var dialog = new Microsoft.Win32.OpenFileDialog();
    dialog.Filter =
        "Image Files (*.jpg;*.png; *.jpeg; *.gif; *.bmp)|*.jpg;*.png; *.jpeg; *.gif; *.bmp";

    if ((bool)dialog.ShowDialog())
    {
        BitmapImage src = new BitmapImage();
        src.BeginInit();
        src.UriSource = new Uri(dialog.FileName, UriKind.Relative);
        src.DecodePixelHeight = 120;
        src.DecodePixelWidth = 120;
        src.CacheOption = BitmapCacheOption.OnLoad;
        src.EndInit();

        var image = new Image { Source = src };

        Point p = SpecialPhoto.TranslatePoint(new Point(0, 0), canvas);
        Canvas.SetLeft(image, p.X);
        Canvas.SetTop(image, p.Y);
        canvas.Children.Add(image);
    }
}