Silverlight客户端实现图片的截取和压缩----之上传头像

前几日在公司做sl上传头像，因为代码不能拿出来，所以自己大体写了下。功能上算是实现了。效果图：

点击Browse按钮打开一张图片，点击Clip会出来一个红色的方框。可以用鼠标拖动红框，在右边角有一个三角，可以改变大小。还有四周灰色的蒙版，用了四个Rectangle，如下图

四个Rectangle的放置，当然不一定按照我的做法，只要能实现功能即可。

xaml代码：

<controls:ChildWindow x:Class="SlTest.ClipImg"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
           Width="352" Height="437"
           Title="ClipImg">
    <Grid x:Name="LayoutRoot" Margin="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <!--上方两个功能按钮-->
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Button Content="Browse" Width="75" Click="OnSelectPicClick"/>
            <Button Content="Clip" Width="75" Click="OnClipClick"/>
        </StackPanel>
        
        <Canvas x:Name="ImgCanvas" Grid.Row="1" Height="340" Width="310" Margin="0 5 0 0">
            <Image x:Name="SourceImg" Margin="0" MaxHeight="340" MaxWidth="310" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                   MouseLeftButtonDown="OnImgMouseLeftBtnDown" MouseMove="OnImgMouseMove" MouseLeftButtonUp="OnImgMosueLeftBtnUp"/>
            <!--做蒙版的四个Rectangle-->
            <Rectangle Name="topMask" Fill="#4333" Canvas.Top="0" Canvas.Left="0" />
            <Rectangle Name="bottomMask" Fill="#4333" />
            <Rectangle Name="leftMask" Fill="#4333" Canvas.Left="0"/>
            <Rectangle Name="rightMask" Fill="#4333" Canvas.Top="0" />
            <!--红色的框，还有右下角的红色三角（一个Path）-->
            <Border x:Name="ImgCropBorder" Height="140" Width="140" BorderBrush="Red" BorderThickness="1" Visibility="Collapsed"  Margin="0"
                        MouseLeftButtonDown="OnBorderMouseLeftBtnDown" MouseMove="OnBorderMouseMove" MouseLeftButtonUp="OnBorderMosueLeftBtnUp" >
                <Path Data="M400,215 L370,240 L400,240 z" Fill="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Cursor="SizeNWSE"
                        Stretch="Fill" Stroke="Red" Width="10" Height="10" UseLayoutRounding="False" />
            </Border>
        </Canvas>
        
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"  Grid.Row="2">
            <Button x:Name="OKButton" Content="OK" Click="OKButton_Click" Width="75" Height="23" Margin="5 0"/>
            <Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Width="75" Height="23" Margin="5 0"/>
        </StackPanel>
    </Grid>
</controls:ChildWindow>

cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Windows.Media.Imaging;

namespace SlTest
{
    public partial class ClipImg : ChildWindow
    {
        public ClipImg()
        {
            InitializeComponent();
        }

        private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }

        private void CancelButton_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }


        #region move & resize the Red Boreder

        private bool isBorder, isPath;
        private Point mousePosition;

        private void OnImgMouseLeftBtnDown(object sender, MouseButtonEventArgs e)
        {
            if (ImgCropBorder.Visibility == Visibility.Visible)
            {
                FrameworkElement element = sender as FrameworkElement;
                Point p = e.GetPosition(ImgCropBorder);
                if (p.X > 0 && p.X <= ImgCropBorder.Width
                    && p.Y > 0 && p.Y <= ImgCropBorder.Height)
                {
                    isBorder = true;
                    mousePosition = e.GetPosition(null);
                    if (element != null)
                    {
                        element.CaptureMouse();
                        element.Cursor = Cursors.Hand;
                    }
                }
            }
        }

        private void OnImgMouseMove(object sender, MouseEventArgs e)
        {
            if (isBorder)
            {
                double deltaV = e.GetPosition(null).Y - mousePosition.Y;
                double deltaH = e.GetPosition(null).X - mousePosition.X;

                double newTop = deltaV + (double)ImgCropBorder.GetValue(Canvas.TopProperty);
                double newLeft = deltaH + (double)ImgCropBorder.GetValue(Canvas.LeftProperty);

                if (newTop >= 0 && newTop <= SourceImg.Height - ImgCropBorder.Height)
                    ImgCropBorder.SetValue(Canvas.TopProperty, newTop);
                if (newLeft >= 0 && newLeft <= SourceImg.Width - ImgCropBorder.Width)
                    ImgCropBorder.SetValue(Canvas.LeftProperty, newLeft);

                mousePosition = e.GetPosition(null);
                //CropImg();
                SetMask();
            }
        }

        private void OnImgMosueLeftBtnUp(object sender, MouseButtonEventArgs e)
        {
            isBorder = false;
            SourceImg.ReleaseMouseCapture();
            mousePosition.X = mousePosition.Y = 0;
            SourceImg.Cursor = null;
        }

        private void OnBorderMouseLeftBtnDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;
            mousePosition = e.GetPosition(null);
            Point p = e.GetPosition(ImgCropBorder);
            if (p.X > 0 && p.X <= ImgCropBorder.Width
                && p.Y > 0 && p.Y <= ImgCropBorder.Height)
            {
                mousePosition = e.GetPosition(null);
                isPath = true;
                if (element != null)
                {
                    element.CaptureMouse();
                    element.Cursor = Cursors.SizeNWSE;
                }
            }
        }

        private void OnBorderMouseMove(object sender, MouseEventArgs e)
        {
            if (isPath)
            {
                double deltaV = e.GetPosition(null).Y - mousePosition.Y;
                double deltaH = e.GetPosition(null).X - mousePosition.X;

                double newHeight = deltaV + ImgCropBorder.Height;
                double newWidth = deltaH + ImgCropBorder.Width;

                if (newHeight + Convert.ToDouble(ImgCropBorder.GetValue(Canvas.TopProperty)) > SourceImg.Height)
                    newHeight = SourceImg.Height - Convert.ToDouble(ImgCropBorder.GetValue(Canvas.TopProperty));
                if (newWidth + Convert.ToDouble(ImgCropBorder.GetValue(Canvas.LeftProperty)) > SourceImg.Width)
                    newWidth = SourceImg.Width - Convert.ToDouble(ImgCropBorder.GetValue(Canvas.LeftProperty));

                if (newHeight > 0 && newWidth > 0)
                {
                    ImgCropBorder.Height = newHeight;
                    ImgCropBorder.Width = newWidth;
                }
                mousePosition = e.GetPosition(null);
                //CropImg();
                SizeToMask();
            }
        }

        private void OnBorderMosueLeftBtnUp(object sender, MouseButtonEventArgs e)
        {
            isPath = false;
            FrameworkElement element = sender as FrameworkElement;
            element.ReleaseMouseCapture();
            mousePosition.X = mousePosition.Y = 0;
            element.Cursor = null;
        }

        #endregion

        private void OnSelectPicClick(object sender, RoutedEventArgs e)
        {
            try
            {
                OpenFileDialog ofd = new OpenFileDialog();
                if (true == ofd.ShowDialog())
                {
                    FileInfo fi = ofd.File;

                    BitmapImage bitmap = new BitmapImage();
                    bitmap.SetSource(fi.OpenRead());

                    if (bitmap.PixelHeight >= bitmap.PixelWidth)
                    {
                        if (bitmap.PixelHeight >= ImgCanvas.Height)
                        {
                            SourceImg.Width = ImgCanvas.Height / bitmap.PixelWidth * bitmap.PixelWidth;
                            SourceImg.Height = ImgCanvas.Height;
                        }
                        else
                        {
                            SourceImg.Width = bitmap.PixelWidth;
                            SourceImg.Height = bitmap.PixelHeight;
                        }
                    }
                    else
                    {
                        if (bitmap.PixelWidth > ImgCanvas.Width)
                        {
                            SourceImg.Height = bitmap.PixelHeight * ImgCanvas.Width / bitmap.PixelWidth;
                            SourceImg.Width = ImgCanvas.Width;
                        }
                        else
                        {
                            SourceImg.Height = bitmap.PixelHeight;
                            SourceImg.Width = bitmap.PixelWidth;
                        }
                    }
                                        
                    SourceImg.Source = bitmap;
                    ResetMask();
                }
            }
            catch (Exception ex) { MessageBox.Show(ex.ToString()); }
        }

        private void OnClipClick(object sender, RoutedEventArgs e)
        {
            if (SourceImg.Source != null)
            {
                ImgCropBorder.Width = ImgCropBorder.Height = 140;

                if (SourceImg.Height < 140)
                    ImgCropBorder.Height = SourceImg.Height / 2;
                if (SourceImg.Width < 140)
                    ImgCropBorder.Width = SourceImg.Width / 2;
                if (ImgCropBorder.Width > ImgCropBorder.Height)
                    ImgCropBorder.Width = ImgCropBorder.Height;
                else
                    ImgCropBorder.Height = ImgCropBorder.Width;

                Canvas.SetTop(ImgCropBorder, SourceImg.Height / 2 - ImgCropBorder.Width / 2);
                Canvas.SetLeft(ImgCropBorder, SourceImg.Width / 2 - ImgCropBorder.Width / 2);

                if (ImgCropBorder.Visibility == Visibility.Collapsed)
                {
                    ImgCropBorder.Visibility = System.Windows.Visibility.Visible;
                    SetMask();
                }
                else
                {
                    ImgCropBorder.Visibility = System.Windows.Visibility.Collapsed;
                    WriteableBitmap _WriteableBitmap = new WriteableBitmap((int)ImgCropBorder.Width, (int)ImgCropBorder.Width);
                    TranslateTransform t = new TranslateTransform();
                    t.Y = -1 * Convert.ToDouble(ImgCropBorder.GetValue(Canvas.TopProperty));
                    t.X = -1 * Convert.ToDouble(ImgCropBorder.GetValue(Canvas.LeftProperty));
                    _WriteableBitmap.Render(SourceImg, t);
                    _WriteableBitmap.Invalidate();
                    SourceImg.Source = _WriteableBitmap;
                    ResetMask();
                }
            }
        }

        private void SetMask()
        {
            double left = Canvas.GetLeft(ImgCropBorder);
            double top = Canvas.GetTop(ImgCropBorder);

            topMask.Height = top;

            leftMask.Height = SourceImg.Height - top;
            leftMask.Width = left;
            Canvas.SetTop(leftMask, top);

            SizeToMask();
        }


        private void SizeToMask()
        {
            double left = Canvas.GetLeft(ImgCropBorder);
            double top = Canvas.GetTop(ImgCropBorder);

            topMask.Width = left + ImgCropBorder.Width;

            rightMask.Height = top + ImgCropBorder.Height;
            rightMask.Width = SourceImg.Width - left - ImgCropBorder.Width;
            Canvas.SetLeft(rightMask, left + ImgCropBorder.Width);

            bottomMask.Width = SourceImg.Width - left;
            bottomMask.Height = SourceImg.Height - top - ImgCropBorder.Height;
            Canvas.SetLeft(bottomMask, left);
            Canvas.SetTop(bottomMask, top + ImgCropBorder.Height);
        }

        private void ResetMask()
        {

            leftMask.Width = 0;
            rightMask.Width = 0;
            topMask.Width = 0;
            bottomMask.Width = 0;
        }
    }
}

移动红色框的事件是写在Image上的，因为红色的框是透明的。改变大小的事件写在Border上不是Path上。代码比较简单基本上都能够看懂

我就不浪费口舌了。。。

图片的截取和压缩主要通过WriteableBitmap 这个类实现的，对它进行相应的变换就可以实现截取和压缩。

由WriteableBitmap转换成byte我调用了FluxJpeg这个三方的。博客园上有很多说明，在博客园上搜索“FluxJpeg”就可以找的到，

也有很详细说明。

还有一个我用到的类：

    public class ImgByte
    {
        public static byte[] BitMapToByte(System.Windows.Media.Imaging.WriteableBitmap bitmap)
        {
            if (bitmap == null) return null;
            int width = bitmap.PixelWidth;
            int height = bitmap.PixelHeight;
            int bands = 3;
            byte[][,] raster = new byte[bands][,];

            for (int i = 0; i < bands; i++)
            {
                raster[i] = new byte[width, height];
            }

            for (int row = 0; row < height; row++)
            {
                for (int column = 0; column < width; column++)
                {
                    int pixel = bitmap.Pixels[width * row + column];
                    byte a = ((byte)(pixel >> 24));

                    byte r = (byte)(pixel >> 16);//4 R
                    byte g = (byte)(pixel >> 8);//2 G
                    byte b = (byte)pixel;//0 B

                    if (a < 2)
                    {
                        raster[0][column, row] = (byte)(255 - r);
                        raster[1][column, row] = (byte)(255 - g);
                        raster[2][column, row] = (byte)(255 - b);
                    }
                    else
                    {
                        raster[0][column, row] = (byte)(r * 255.0 / a);
                        raster[1][column, row] = (byte)(g * 255.0 / a);
                        raster[2][column, row] = (byte)(b * 255.0 / a);
                    }
                }
            }

            FluxJpeg.Core.ColorModel model = new FluxJpeg.Core.ColorModel { colorspace = FluxJpeg.Core.ColorSpace.RGB };
            FluxJpeg.Core.Image img = new FluxJpeg.Core.Image(model, raster);


            //Encode the Image as a JPEG
            System.IO.MemoryStream stream = new System.IO.MemoryStream();
            FluxJpeg.Core.Encoder.JpegEncoder encoder = new FluxJpeg.Core.Encoder.JpegEncoder(img, 100, stream);
            encoder.Encode();

            //Back to the start
            stream.Seek(0, System.IO.SeekOrigin.Begin);

            //Get teh Bytes and write them to the stream
            byte[] binaryData = new byte[stream.Length];
            long bytesRead = stream.Read(binaryData, 0, (int)stream.Length);
            return binaryData;
        }
    }

使用的这个类转化成Image的，对于透明的图片，我做了点修正，透明图片会用白色填充。