imgareaselect图片裁剪、js裁剪案例

imgareaselect官网：http://odyniec.net/projects/imgareaselect/

进行下载、以及查看官网案例、文档。

首页页面要引用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;
            }
        }
    }