WPF头像裁剪

需求很常见，就是用户上传头像前进行固定大小的裁剪。
百度一番，找到几个差不多的，
其一 http://download.youkuaiyun.com/detail/tianhaosen/7159901，这个的实现方式是截图框大小固定不变，背景图可以通过鼠标拖动和鼠标滚轮缩放，经过测试，这个对图片的裁剪不是很准确，尤其是大图或者靠近图片边缘裁剪的时候会出现较大误差，然后我尝试调整了下截图位置的算法，但多少还是有偏差，无奈只好放弃，有兴趣的同学可以下下来研究研究。
其二 http://blog.youkuaiyun.com/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、上传至服务器）。