jquery 上传图片自由截取

2014年5月23日

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>

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

1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7 8 9 10 11 12

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);          }

　　实现代码：前台

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

//上传图片 $( "#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);              }          }      }); });

　　实现代码后台：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

/// <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);         }

　

 

转载请注明出处：http://www.cnblogs.com/Xingsoft-555/