jquery 上传图片自由截取

为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。本文主要是利用jQuery的imgAreaSelect插件实现。

首先引入三个文件：

 <script src="<%:Url.Content("~/UI/Scripts/jquery-1.8.2.min.js") %>"></script>  
<link href='<%:Url.Content("~/UI//CSS/imgareaselect-default.css") %>' rel="stylesheet" />
    <script src='<%:Url.Content("~/UI/Scripts/jquery.imgareaselect.pack.js")%>'></script>

前段主要代码：初始化所选择截取的图片

$('#photo').imgAreaSelect({
               aspectRatio: '1:1',
               handles: true
              , fadeSpeed: 200
              , onSelectChange: preview
               // , onSelectEnd: someFunction
           });

设置所选区域大小值，与坐标：

function preview(img, selection) {
            if (!selection.width || !selection.height)
                return;
 
            var scaleX = 100 / selection.width;
            var scaleY = 100 / selection.height;
 
            $('#left').val(selection.x1);
            $('#top').val(selection.y1);
            $('#w').val(selection.width);
            $('#h').val(selection.height);
        }

　　实现代码：前台

//上传图片
$("#File1").change(function () {
 
    $("#formSave").ajaxSubmit({
        type: "POST",
        url: "/Home/UpPic/",
        dataType: "json",
        success: function (data) {
            if (data.msg == "OK") {
                $("#photo").attr("src", data.path)
            } else {
                alert(data.msg);
            }
        }
    });
});
 
//剪切后保存头像
$("#btnSaveImg").click(function () {
 
    if ($('#left').val() == "") {
        alert("请先截取图片");
        return;
    }
 
    $("#formSave").ajaxSubmit({
        type: "POST",
        url: "/Home/SavePic/",
        dataType: "json",
        success: function (data) {
            if (data.msg == "OK") {
                $("#photo").attr("src", data.path)
                alert("保存成功！");
            } else {
                alert(data.msg);
            }
        }
    });
});

　　实现代码后台：

/// <summary>
       /// 上传图片
       /// </summary>
       public void UpPic()
       {
           try
           {
               var file = Request.Files["File1"];
               if (file.ContentLength == 0)
               {
                   ReWrite("Error","请选择文件");
                   return;
               }
               if (file.ContentLength > 307200)
               {
                   ReWrite("Error","文件过大");
                   return;
               }
 
               int width = 0; int height = 0;
 
               using (Image originalImg = Image.FromFile(file.FileName))
               {
                   double bi = originalImg.Width / originalImg.Height;
                   if (bi > 1.6)
                   {
                       width = 600;
                       height = (int)(600 / bi);
                   }
                   else
                   {
                       height = 360;
                       width = (int)(360 * bi);
                   }
               }
 
               //w600 h360;
               string extensionName = System.IO.Path.GetExtension(file.FileName).ToLower();
               string fileName ="temp" + extensionName;
 
               string p = "/Images/" + fileName;
               string path = Server.MapPath("~" + p);
               // file.SaveAs(path);
               Session["path"] = "~" + p;
               CommonMethod.AutoMakeThumNail(file.FileName, path, width, height, PicThumNailModel.H);
               ReWrite("OK", p);
           }
           catch (Exception ex)
           {
               ReWrite("Error",ex.Message);
               return;
           }
       }
 
       public void SavePic()
       {
             
            
           string photo ="";
           if (Session["path"] != null)
           {
               photo = Session["path"].ToString();
           }
           else
           {
               photo = "~/Images/20140430172226.png";
           }
           photo = Server.MapPath(photo);
           using (Image originalImg = Image.FromFile(photo))
           {
 
               int imageWidth = originalImg.Width;
               int imageHeight = originalImg.Height;
               int cutTop = Int32.Parse(Request.Form["top"]);
               int cutLeft = Int32.Parse(Request.Form["left"]);
               int dropWidth = Int32.Parse(Request.Form["w"]);
               int dropHeight = Int32.Parse(Request.Form["h"]);
               ImageHelp imgHelp = new ImageHelp();
 
              // string picPath = CommonMethod.GetConfig("HeadPicPath");
 
               string extensionName = System.IO.Path.GetExtension(photo).ToLower();
               string picName =DateTime.Now.ToString("yyyyMMddHHmmssff") + extensionName;
 
               string pp = "/Images/" + picName;
 
 
               imgHelp.GetPart(photo, Server.MapPath("/Images/"), 0, 0, dropWidth, dropHeight, cutLeft, cutTop, imageWidth, imageHeight, picName);
 
             
               ReWrite("OK", pp);
           }
         //  DelPic(photo);
       }