進行下載、以及檢視官網案例、文件。

首頁頁面要引用js以及css：

 <link href="/Scripts/imgareaselect/css/imgareaselect-default.css" rel="stylesheet"
        type="text/css" />
    <script src="/Scripts/imgareaselect/scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/imgareaselect/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>

程式碼：

 <link href="/Scripts/imgareaselect/css/imgareaselect-default.css" rel="stylesheet"
        type="text/css" />
    <script src="/Scripts/imgareaselect/scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/imgareaselect/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
        var x1 = 20;
        var y1 = 20;
        var x2 = 40;
        var y2 = 40;
        var w = 60;
        var h = 60;
        $(document).ready(function () {
            $('#photo').imgAreaSelect({
                maxWidth: 148,
                maxHeight: 148,
                handles: true,
                x1: 20,
                y1: 20,
                x2: 80,
                y2: 80,
                aspectRatio: '1:1',
                onSelectChange: preview
            });
            $('#lbSubmit').bind('click', function () {
                if (w == 0|| h== 0) {
                    alert("請選擇圖片區域!");
                    return;
                }
 

                $.ajax({
                    url: 'ImageHandle.ashx',
                    data: { x1: x1, y1: y1,x2: x2, y2: y2, w: w, h: h, path: "圖片地址" },
                    dataType: 'json',
                    type: 'POST',
                    success: function (data) {
                        if (data.Success) {
                            window.location.href = window.location.href;
                        }
                        else {
                            alert(data.Msg);
                        }
                    }
                });
            });
        });
        function preview(img, selection) {
            if (!selection.width || !selection.height)
                return;
            x1=selection.x1;
            y1=selection.y1;
            x2=selection.x2;
            y2=selection.y2;
            w=selection.width;
            h=selection.height;
        }
        
    </script>

     <form id="fm_edit_user" runat="server" enctype="multipart/form-data">
    <div class="content-header">
        <h3>
            頭像設定</h3>
    </div>
    <div class="content-body">
        <table class="box-form-b" width="100%" align="center">
            <tr>
                <td align="right" style="width: 130px;">
                    頭像：
                </td>
                <td>
                    <img src="/View/User/PictureHelper.ashx" alt="頭像" width="148" height="148" />
                </td>
            </tr>
           
            <tr>
                <td align="right" style="width: 130px;">
                    設定新頭像：
                </td>
                <td>
                    <img src="/View/User/PictureHelper.ashx?path=<%=ViewState["path"] %>" id="photo"  /><div>注：如果沒有出現剪裁框，則將滑鼠放在需要剪裁的圖片上，點選滑鼠左鍵進行選中剪裁。</div>
                </td>
            </tr>
            
                    
            <tr>
                <td align="center" colspan="2">
                    
                    <a class="y-btn y-btn-blue" id="lbSubmit" href="javascript:void(0)" ><i class="icon icon-ok-white"></i>提交</a>
                </td>
            </tr>
        </table>
    </div>
    </form>

 

ImageHandle.ashx後臺程式碼：

     /// <summary>
    /// ImageHandle 的摘要說明
    /// </summary>
    public class ImageHandle : HttpHandler
    {

        public override void ProcessRequest(HttpContext context)
        {
            Message msg = new Message();
            context.Response.ContentType = "text/plain";
            string name = context.Request["path"].Trim();
            string sx1 = context.Request["x1"].Trim();
            string sy1 = context.Request["y1"].Trim();
            string sx2 = context.Request["x2"].Trim();
            string sy2 = context.Request["y2"].Trim();
            string width = context.Request["w"].Trim();
            string height = context.Request["h"].Trim();
            string filePath = System.Web.HttpContext.Current.Server.MapPath("/Images/defaultUser.jpg");
            if (System.IO.File.Exists(context.Request.MapPath("~/upload/"+name)))
            {
                 filePath = System.Web.HttpContext.Current.Server.MapPath("~/upload/" + name);
            }
            User user=new User();//自己獲取使用者跟人資訊
            var data = MakeThumbnail(filePath, int.Parse(sx1), int.Parse(sy1), int.Parse(width), int.Parse(height));
            user.Photo = data;//返回二進位制
            if (UpdateUser(user))
            {
                msg.Success = true;
                msg.Msg = "設定頭像成功";
                msg.Path = name;
            };
            context.Response.Write(Dwkj.Common.DataTypeExtend.SerializeHelper.JSONSerialize(msg));//序列化json 序列化方法沒有放到程式裡，自己百度一下。
        }

        /// <summary>
        /// 剪下圖片
        /// </summary>
        /// <param name="path"></param>
        /// <param name="sx"></param>
        /// <param name="sy"></param>
        /// <param name="width"></param>
        /// <param name="height"></param>
        /// <returns></returns>
        public byte[] MakeThumbnail(string path,int sx,int sy, int width, int height)
        {
            Image originalImage = Image.FromFile(path);

            int x = sx;
            int y = sy;
            int ow = originalImage.Width;
            int oh = originalImage.Height;
         
            //新建一個bmp圖片 
            Image bitmap = new Bitmap(width, height);

            //新建一個畫板 
            Graphics g = Graphics.FromImage(bitmap);

            //設定高質量插值法 
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

            //設定高質量,低速度呈現平滑程度 
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

            //清空畫布並以透明背景色填充 
            g.Clear(Color.Transparent);

            //在指定位置並且按指定大小繪製原圖片的指定部分 
            g.DrawImage(originalImage, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
            try
            {
                MemoryStream ms = new MemoryStream();
                bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                return ms.GetBuffer();//也可以生成到指定目錄，具體方法不介紹了
            }
            catch (System.Exception e)
            {
                throw e;
            }
            finally
            {
                originalImage.Dispose();
                bitmap.Dispose();
                g.Dispose();
            }
        }

     
       
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }