Asp.net MVC 实现图片上传剪切

fmms 13年前

使用技术：Asp.net MVC与jquery.uploadify,Jcrop

首先上页面

<!DOCTYPE html>   <html>   <head>       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       <title>Index</title>       <link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css" />       <script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js" type="text/javascript"></script>       <script src="http://www.cnblogs.com/Js/uploadify/swfobject.js" type="text/javascript"></script>       <script src="http://www.cnblogs.com/Js/uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>       <link href="http://www.cnblogs.com/Js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />       <script src="http://www.cnblogs.com/Js/crop/jquery.Jcrop.min.js" type="text/javascript"></script>       <link href="http://www.cnblogs.com/Js/crop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />       <style type="text/css">   /* 上传按钮 */           #uploadifyUploader   {               margin-top: 235px;   }   /* 加载条 */           .uploadifyQueueItem   {               margin: 0 auto;   }           #img-up   {               width: 700px;               height: 500px;               background-color: #e8f0f6;               text-align: center;   }           #img-prev-container   {               width: 200px;               height: 200px;               overflow: hidden;               clear: both;   }           #img-crop   {               display: none;   }   </style>   </head>   <body>       <div id="img-up">           <input type="file" id="uploadify" name="uploadify" />           <div id="fileQueue">           </div>       </div>       <div id="img-crop">           <div id="img-prev-container">               <img id="img-preview" />           </div>           <img id="img-uploadify" />           <form action="/Crop/tryCrop" method="post">           <input type="hidden" name="x" id="x" />           <input type="hidden" name="y" id="y" />           <input type="hidden" name="w" id="w" />           <input type="hidden" name="h" id="h" />           <input type="hidden" name="img" id="img" />           <input type="submit" value="剪裁" />           </form>       </div>   </body>   </html>
JS
<script type="text/javascript">       $(function () {           var jcrop_api, boundx, boundy;              function updateCoords(c) {               $('#x').val(c.x);               $('#y').val(c.y);               $('#w').val(c.w);               $('#h').val(c.h);           };           function updatePreview(c) {               if (parseInt(c.w) > 0) {                   /* 商必须与img-preview宽高一致 */                   var rx = 200 / c.w;                   var ry = 200 / c.h;                      $('#img-preview').css({                       width: Math.round(rx * boundx) + 'px',                       height: Math.round(ry * boundy) + 'px',                       marginLeft: '-' + Math.round(rx * c.x) + 'px',                       marginTop: '-' + Math.round(ry * c.y) + 'px'                   });               }           };              $("#uploadify").uploadify({               'uploader': 'http://www.cnblogs.com/Js/uploadify/uploadify.swf',               'script': '/Crop/upload',               'cancelImg': 'http://www.cnblogs.com/Js/uploadify/cancel.png',               'folder': 'Images',               'queueID': 'fileQueue',               'auto': true,               'buttonText': 'upload image',               'queueSizeLimit': 1,               'multi': false,               'fileDesc': 'jpg,gif',               'fileExt': '*.jpg;*.gif',               'sizeLimit': '819200',               'onComplete': function (event, queueID, fileObj, response, data) {                   var result = eval('(' + response + ')');                   if ('0' == result.id) {                       $('#img-up').remove();                       $('#img-crop').css("display", "block");                       /* 绑定图片名称 */                       var iname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);                       $('#img').val(iname);                       /* 加载原始图片 */                       $('#img-preview,#img-uploadify').attr("src", result.mess);                       /* 加载剪裁插件 */                       $('#img-uploadify').Jcrop({                           onChange: updatePreview,                           onSelect: updatePreview,                           aspectRatio: 1,                           onSelect: updateCoords,                           setSelect: [0, 0, 200, 200]                       }, function () {                           var bounds = this.getBounds();                           boundx = bounds[0];                           boundy = bounds[1];                           jcrop_api = this;                       });                   } else if ('1' == result.id) {                       /* 异常信息提示 */                       alert(result.mess)                   }               }           });       });       </script>
public class CropController : Controller       {           public ActionResult Index()           {               return View();           }              [HttpPost]           public ActionResult upload(HttpPostedFileBase Filedata)           {               try               {                   Image image = Image.FromStream(Filedata.InputStream);                   string ipath = Path.Combine("Images", Path.GetFileName(Filedata.FileName));                   string spath = Path.Combine(HttpContext.Server.MapPath("~"), ipath);                   image.Save(spath);                      return Json(new { id = "0", mess = string.Format("{0}{1}/{2}", BaseUrl, "Images", Filedata.FileName), iw = image.Width, ih = image.Height });               }               catch (Exception ex)               {                   return Json(new { id = "1", mess = ex.Message });               }           }              public void tryCrop(string img, int x, int y, int w, int h)           {               Image image = Image.FromFile(Path.Combine(HttpContext.Server.MapPath("~"), "Images", img));               Crop(image, w, h, x, y).Save(Path.Combine(HttpContext.Server.MapPath("~"), "Images", "v" + img));                  Response.Redirect(string.Format("{0}{1}/{2}", BaseUrl, "Images", "v" + img));           }              [NonAction]           public string BaseUrl           {               get               {                  return Request.Url.Scheme + "://" + Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + '/';               }           }              [NonAction]           public static Image Crop(Image image, int width, int height, int x, int y)           {               Bitmap bmp = new Bitmap(width, height, PixelFormat.Format24bppRgb);               bmp.SetResolution(image.HorizontalResolution, image.VerticalResolution);                  using (Graphics graphic = Graphics.FromImage(bmp))               {                   graphic.SmoothingMode = SmoothingMode.AntiAlias;                   graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;                   graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;                   graphic.DrawImage(image, new Rectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);               }                  return bmp;           }       }
转自：http://www.cnblogs.com/yoer/archive/2012/02/18/asp_net_mvc_image_upload_crop.html