[转载]Asp.net MVC 实现图片上传剪切-Mikel

使用技术：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>

JQuery:

<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>

Controller代码：

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

[转载]Asp.net MVC 实现图片上传剪切

相关推荐

热门标签

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏