WPF头像裁剪

需求很常见，就是用户上传头像前进行固定大小的裁剪。
百度一番，找到几个差不多的，
其一 http://download.csdn.net/detail/tianhaosen/7159901，这个的实现方式是截图框大小固定不变，背景图可以通过鼠标拖动和鼠标滚轮缩放，经过测试，这个对图片的裁剪不是很准确，尤其是大图或者靠近图片边缘裁剪的时候会出现较大误差，然后我尝试调整了下截图位置的算法，但多少还是有偏差，无奈只好放弃，有兴趣的同学可以下下来研究研究。
其二 http://blog.csdn.net/jtl309/article/details/50651911，这个的实现方式是背景图片保持大小不变，裁剪框可以通过鼠标拖动进行缩放。于是尝试在这个的基础上进行调整：）
首先，裁剪框的拖动以及缩放作者已经做的很完善了，主要是利用了Thumb控件进行自定义。我的需求是裁剪框要是一个固定大小的正方形，所以我对作者的源码进行了修改。源码中作者是在DragHelperBase.cs中对矩形框的大小进行实时计算，其中有4个ResizeFrom**方法，我在这4个方法的入参中均加入了宽高（out double HeightNew,out double WidthNew），并且在方法的最后一行赋值高和宽相等，这样就保证了裁剪框始终是正方形，另外，作者的这个框框拖动的时候能把框拖到大边框以外，是个小bug，我这边在每次拖动之后都跟Parent.ActualWidth比较一下。ok，算法代码修改完毕，下面就是对样式代码进行了一些调整，这个各位同学根据自己需求改动即可。
主要修改了DragHelperBase.cs代码：

   #region ResizeElement        private Rect ResizeElement(CustomThumb HitedThumb, double HorizontalChange, double VerticalChange)        {            #region Get Old Value            if (HitedThumb == null) return Rect.Empty;            Rect TargetActualBound = GetTargetActualBound();            double TopOld    = CorrectDoubleValue(TargetActualBound.Y);            double LeftOld   = CorrectDoubleValue(TargetActualBound.X);            double WidthOld  = CorrectDoubleValue(TargetActualBound.Width);            double HeightOld = CorrectDoubleValue(TargetActualBound.Height);            double TopNew    = TopOld;            double LeftNew   = LeftOld;            double WidthNew  = WidthOld;            double HeightNew = HeightOld;            #endregion            if (HitedThumb.DragDirection == DragDirection.TopLeft                || HitedThumb.DragDirection == DragDirection.MiddleLeft                || HitedThumb.DragDirection == DragDirection.BottomLeft)            {                ResizeFromLeft(DragHelperParent, LeftOld, WidthOld, TopOld, HeightOld, HorizontalChange, out LeftNew, out WidthNew, out HeightNew);            }            if (HitedThumb.DragDirection == DragDirection.TopLeft                || HitedThumb.DragDirection == DragDirection.TopCenter                || HitedThumb.DragDirection == DragDirection.TopRight)            {                ResizeFromTop(DragHelperParent, LeftOld, WidthOld, TopOld, HeightOld, VerticalChange, out TopNew, out HeightNew, out WidthNew);            }            if (HitedThumb.DragDirection == DragDirection.TopRight                || HitedThumb.DragDirection == DragDirection.MiddleRight                || HitedThumb.DragDirection == DragDirection.BottomRight)            {                ResizeFromRight(DragHelperParent, LeftOld, WidthOld,TopOld,HeightOld, HorizontalChange, out WidthNew, out HeightNew);            }            if (HitedThumb.DragDirection == DragDirection.BottomLeft                || HitedThumb.DragDirection == DragDirection.BottomCenter                || HitedThumb.DragDirection == DragDirection.BottomRight)            {                ResizeFromBottom(DragHelperParent, LeftOld, WidthOld, TopOld, HeightOld, VerticalChange, out HeightNew, out WidthNew);            }            WidthNew = WidthNew < 0 ? 0 : WidthNew;            HeightNew = HeightNew < 0 ? 0 : HeightNew;            this.Width = WidthNew;            this.Height = HeightNew;            Canvas.SetTop(this, TopNew);            Canvas.SetLeft(this, LeftNew);            return new Rect            {                X = LeftNew,                Y = TopNew,                Width = WidthNew,                Height = HeightNew            };        }        #endregion        #region Resize Base Methods        private static void CalcSize(double h,double w)        {        }        #region ResizeFromTop        private static void ResizeFromTop(FrameworkElement Parent, double LeftOld, double WidthOld, double TopOld, double HeightOld, double VerticalChange, out double TopNew, out double HeightNew, out double WidthNew)        {            double MiniHeight = 10;            double top = TopOld + VerticalChange;            TopNew = ((top + MiniHeight) > (HeightOld + TopOld)) ? HeightOld + TopOld - MiniHeight : top;            TopNew = TopNew < 0 ? 0 : TopNew;            HeightNew = HeightOld + TopOld - TopNew;            HeightNew = CorrectNewHeight(Parent, TopNew, HeightNew);            double tmpWidth = WidthOld;            if (LeftOld+HeightNew>Parent.ActualWidth)            {                HeightNew = tmpWidth;                WidthNew = tmpWidth;            }            else            {                WidthNew = HeightNew;                tmpWidth = HeightNew;            }        }        #endregion        #region ResizeFromLeft        private static void ResizeFromLeft(FrameworkElement Parent, double LeftOld, double WidthOld, double TopOld, double HeightOld, double HorizontalChange, out double LeftNew, out double WidthNew, out double HeightNew)        {            double MiniWidth = 10;            double left = LeftOld + HorizontalChange;            LeftNew = ((left + MiniWidth) > (WidthOld + LeftOld)) ? WidthOld + LeftOld - MiniWidth : left;            LeftNew = LeftNew < 0 ? 0 : LeftNew;            WidthNew = WidthOld + LeftOld - LeftNew;            WidthNew = CorrectNewWidth(Parent, LeftNew, WidthNew);            double tmpHeight = HeightOld;            if (TopOld + WidthNew > Parent.ActualHeight)            {                WidthNew = tmpHeight;                HeightNew = tmpHeight;            }            else            {                HeightNew = WidthNew;                tmpHeight = WidthNew;            }        }        #endregion        #region ResizeFromRight        private static void ResizeFromRight(FrameworkElement Parent, double LeftOld, double WidthOld, double TopOld, double HeightOld, double HorizontalChange, out double WidthNew, out double HeightNew)        {            if (LeftOld + WidthOld + HorizontalChange < Parent.ActualWidth)            {                WidthNew = WidthOld + HorizontalChange;            }            else            {                WidthNew = Parent.ActualWidth - LeftOld;            }            if (TopOld + HeightOld + HorizontalChange < Parent.ActualHeight)            {                HeightNew = HeightOld + HorizontalChange;            }            else            {                HeightNew = Parent.ActualWidth - TopOld;            }            WidthNew = WidthNew < 0 ? 0 : WidthNew;            if (WidthNew<HeightNew)            {                HeightNew = WidthNew;            }            else            {                WidthNew = HeightNew;            }        }        #endregion        #region ResizeFromBottom        private static void ResizeFromBottom(FrameworkElement Parent, double LeftOld, double WidthOld, double TopOld, double HeightOld, double VerticalChange, out double HeightNew, out double WidthNew)        {            if (TopOld + HeightOld + VerticalChange < Parent.ActualWidth)            {                HeightNew = HeightOld + VerticalChange;            }            else            {                HeightNew = Parent.ActualWidth - TopOld;            }            if (LeftOld + WidthOld + VerticalChange < Parent.ActualWidth)            {                WidthNew = WidthOld + VerticalChange;            }            else            {                WidthNew = Parent.ActualWidth - LeftOld;            }            HeightNew = HeightNew < 0 ? 0 : HeightNew;            if (WidthNew < HeightNew)            {                HeightNew = WidthNew;            }            else            {                WidthNew = HeightNew;            }        }        #endregion

现在回到我们自己的项目，把上面修改过的工程生成的dll引用进来，

<Canvas x:Name="canvas" Grid.Row="1" Width="500" Height="500">            <Rectangle Stroke="{StaticResource ButtonBackgroundBrush}"                        Fill="Transparent" StrokeThickness="2"                        Width="300" Height="300" Canvas.Left="100" Canvas.Top="100"                       UICommon:DragControlHelper.IsEditable="True"                        UICommon:DragControlHelper.IsSelectable="True"/>            <UICommon:DragControlHelper CornerWidth="6" Background="{StaticResource CancleButtonBackgroudBrush}" BorderBrush="{StaticResource ButtonBackgroundBrush}" DragChanging="DragControlHelper_DragChanging" DragCompleted="DragControlHelper_DragCompleted"/> </Canvas><StackPanel Grid.Row="2" HorizontalAlignment="Center" Orientation="Horizontal">            <Button Content="取消" Name="btnCancel" Width="62" Height="32"  Foreground="#FFFFFF" Style="{StaticResource CustomButtonStyle}"                        Margin="10" Click="btnCancel_Click" Background="{StaticResource CancleButtonBackgroudBrush}"></Button>            <Button Content="确定" Name="btnConfirm" Width="62" Height="32"  Foreground="#FFFFFF" Style="{StaticResource CustomButtonStyle}"                        Margin="10" Click="btnConfirm_Click" Background="{StaticResource ButtonBackgroundBrush}"></Button></StackPanel>

private void DragControlHelper_DragCompleted(object Sender, UICommon.Controls.DragChangedEventArgs e){            newBound = e.NewBound;//拖动完成后的新位置}private void btnConfirm_Click(object sender, RoutedEventArgs e){            Bitmap map = new Bitmap(choosedImagePath);            int mapHeight = map.Height;            int mapWidth = map.Width;//图片宽高            int actualHeight = 0;            int actualWidth = 0;//Canvas宽高            int offset = 1;            int left = 0;            int top = 0;            int x = (int)newBound.X;            int y = (int)newBound.Y;            if (mapHeight>mapWidth)//此时高度撑满500            {                actualHeight = 500;                actualWidth = 500 * mapWidth / mapHeight;                left = (500 - actualWidth) / 2;                x -=  left;                offset = mapHeight / 500d;//需要小数            }            else//此时宽度撑满500            {                actualWidth = 500;                actualHeight = 500 * mapHeight / mapWidth;                top = (500 - actualHeight) / 2;                y -= top;                offset = mapWidth / 500d;            }            //计算截图位置和大小            int w= (int)Math.Round(newBound.Width * offset, MidpointRounding.AwayFromZero);            int h = (int)Math.Round(newBound.Height * offset, MidpointRounding.AwayFromZero);            int startX=(int)Math.Round( x * offset,MidpointRounding.AwayFromZero);            int startY=(int)Math.Round( y * offset,MidpointRounding.AwayFromZero);            var resultMap = KiCut(map,startX,startY, w, h);            if (resultMap==null)            {                Alert alert = new Alert("图片裁剪失败，请重新选择图片。");                alert.Owner = this;                alert.ShowDialog();                return;            }            string savePath = NIM.ToolsAPI.GetLocalAppDataDir() + ConfigHelper.GetSettingStr("appDataDir") + "\\CutImageTemp\\";            if (!Directory.Exists(savePath))            {                Directory.CreateDirectory(savePath);            }            string name = "UserHead_" + DateTimeHelper.DatetimeConvertUnix() + ".jpg";            string path=savePath + name;            if (resultMap.Width!=300)//用户调整了裁剪框大小            {                Bitmap newImage = new Bitmap(300, 300, System.Drawing.Imaging.PixelFormat.Format24bppRgb);                Graphics g = Graphics.FromImage(newImage);                g.DrawImage(resultMap, 0, 0, 300, 300);                g.Dispose();                newImage.Save(path, ImageFormat.Jpeg);            }            else//直接保存            {                resultMap.Save(path, ImageFormat.Jpeg);            }}private static Bitmap KiCut(Bitmap b, int StartX, int StartY, int iWidth, int iHeight){            if (b == null)            {                return null;            }            try            {                Bitmap bmpOut = new Bitmap(iWidth, iHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);                Graphics g = Graphics.FromImage(bmpOut);                g.DrawImage(b, new System.Drawing.Rectangle(0, 0, iWidth, iHeight), new System.Drawing.Rectangle(StartX, StartY, iWidth, iHeight), GraphicsUnit.Pixel);                g.Dispose();                return bmpOut;            }            catch(Exception ex)            {                return null;            }}private void Window_Loaded(object sender, RoutedEventArgs e){            BinaryReader binReader = new BinaryReader(File.Open(choosedImagePath, FileMode.Open));            FileInfo fileInfo = new FileInfo(choosedImagePath);            byte[] bytes = binReader.ReadBytes((int)fileInfo.Length);            binReader.Close();            bitmap = new BitmapImage();            bitmap.BeginInit();            bitmap.StreamSource = new MemoryStream(bytes);            bitmap.EndInit();            ImageBrush brush = new ImageBrush(bitmap);            brush.Stretch = Stretch.Uniform;            this.canvas.Background = brush;}

稍微解释下代码，以上代码只是核心部分，另外newBound在构造函数中需要初始化new Rect(100, 100, 300, 300)，因为我这边需要裁剪成300X300的图片，并且我在窗口的Load事件里给Canvas设置了背景图片，也就是用户选择的图片（路径存放在choosedImagePath变量中），并且设置其Stretch属性为Uniform，这样能保证图片在框中自适应正常显示。
虽然我这边默认框大小是300X300，但是一旦用户缩放了裁剪框，我们就需要对裁剪下来的图片进行放大或压缩，然后再做进一步操作（如转码base64、上传至服务器）。