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

最新推荐文章于 2019-06-21 23:40:08 发布

weixin_33701564

最新推荐文章于 2019-06-21 23:40:08 发布

阅读量117

点赞数

文章标签：测试 javascript json ViewUI

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

首先上页面

 
    01<strong><!DOCTYPE html>
 
    02 <html>
 
    03 <head>
 
    04     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
    05     <title>Index</title>
 
    06     <link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css"/>
 
    07     <script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js"type="text/javascript"></script>
 
    08     <script src="http://www.cnblogs.com/Js/uploadify/swfobject.js"type="text/javascript"></script>
 
    09     <script src="http://www.cnblogs.com/Js/uploadify/jquery.uploadify.v2.1.4.min.js"type="text/javascript"></script>
 
    10     <link href="http://www.cnblogs.com/Js/uploadify/uploadify.css" rel="stylesheet"type="text/css" />
 
    11     <script src="http://www.cnblogs.com/Js/crop/jquery.Jcrop.min.js"type="text/javascript"></script>
 
    12     <link href="http://www.cnblogs.com/Js/crop/jquery.Jcrop.css" rel="stylesheet"type="text/css" />
 
    13     <style type="text/css">
 
    14 /* 上传按钮 */
 
    15         #uploadifyUploader
 
    16 {
 
    17             margin-top: 235px;
 
    18 }
 
    19 /* 加载条 */
 
    20         .uploadifyQueueItem
 
    21 {
 
    22             margin: 0 auto;
 
    23 }
 
    24         #img-up
 
    25 {
 
    26             width: 700px;
 
    27             height: 500px;
 
    28             background-color: #e8f0f6;
 
    29             text-align: center;
 
    30 }
 
    31         #img-prev-container
 
    32 {
 
    33             width: 200px;
 
    34             height: 200px;
 
    35             overflow: hidden;
 
    36             clear: both;
 
    37 }
 
    38         #img-crop
 
    39 {
 
    40             display: none;
 
    41 }
 
    42 </style>
 
    43 </head>
 
    44 <body>
 
    45     <div id="img-up">
 
    46         <input type="file" id="uploadify" name="uploadify" />
 
    47         <div id="fileQueue">
 
    48         </div>
 
    49     </div>
 
    50     <div id="img-crop">
 
    51         <div id="img-prev-container">
 
    52             <img id="img-preview" />
 
    53         </div>
 
    54         <img id="img-uploadify" />
 
    55         <form action="/Crop/tryCrop" method="post">
 
    56         <input type="hidden" name="x" id="x" />
 
    57         <input type="hidden" name="y" id="y" />
 
    58         <input type="hidden" name="w" id="w" />
 
    59         <input type="hidden" name="h" id="h" />
 
    60         <input type="hidden" name="img" id="img" />
 
    61         <input type="submit" value="剪裁" />
 
    62         </form>
 
    63     </div>
 
    64 </body>
 
    65 </html></strong>

 
    01<script type="text/javascript">
 
    02     $(function () {
 
    03         var jcrop_api, boundx, boundy;
 
    04  
 
    05         function updateCoords(c) {
 
    06             $('#x').val(c.x);
 
    07             $('#y').val(c.y);
 
    08             $('#w').val(c.w);
 
    09             $('#h').val(c.h);
 
    10         };
 
    11         function updatePreview(c) {
 
    12             if (parseInt(c.w) > 0) {
 
    13                 /* 商必须与img-preview宽高一致 */
 
    14                 var rx = 200 / c.w;
 
    15                 var ry = 200 / c.h;
 
    16  
 
    17                 $('#img-preview').css({
 
    18                     width: Math.round(rx * boundx) + 'px',
 
    19                     height: Math.round(ry * boundy) + 'px',
 
    20                     marginLeft: '-' + Math.round(rx * c.x) + 'px',
 
    21                     marginTop: '-' + Math.round(ry * c.y) + 'px'
 
    22                 });
 
    23             }
 
    24         };
 
    25  
 
    26         $("#uploadify").uploadify({
 
    27             'uploader': 'http://www.cnblogs.com/Js/uploadify/uploadify.swf',
 
    28             'script': '/Crop/upload',
 
    29             'cancelImg': 'http://www.cnblogs.com/Js/uploadify/cancel.png',
 
    30             'folder': 'Images',
 
    31             'queueID': 'fileQueue',
 
    32             'auto': true,
 
    33             'buttonText': 'upload image',
 
    34             'queueSizeLimit': 1,
 
    35             'multi': false,
 
    36             'fileDesc': 'jpg,gif',
 
    37             'fileExt': '*.jpg;*.gif',
 
    38             'sizeLimit': '819200',
 
    39             'onComplete': function (event, queueID, fileObj, response, data) {
 
    40                 var result = eval('(' + response + ')');
 
    41                 if ('0' == result.id) {
 
    42                     $('#img-up').remove();
 
    43                     $('#img-crop').css("display", "block");
 
    44                     /* 绑定图片名称 */
 
    45                     variname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);
 
    46                     $('#img').val(iname);
 
    47                     /* 加载原始图片 */
 
    48                     $('#img-preview,#img-uploadify').attr("src", result.mess);
 
    49                     /* 加载剪裁插件 */
 
    50                     $('#img-uploadify').Jcrop({
 
    51                         onChange: updatePreview,
 
    52                         onSelect: updatePreview,
 
    53                         aspectRatio: 1,
 
    54                         onSelect: updateCoords,
 
    55                         setSelect: [0, 0, 200, 200]
 
    56                     }, function () {
 
    57                         var bounds = this.getBounds();
 
    58                         boundx = bounds[0];
 
    59                         boundy = bounds[1];
 
    60                         jcrop_api = this;
 
    61                     });
 
    62                 } else if ('1' == result.id) {
 
    63                     /* 异常信息提示 */
 
    64                     alert(result.mess)
 
    65                 }
 
    66             }
 
    67         });
 
    68     });   
 
    69 </script>

 
    01public class CropController : Controller
 
    02     {
 
    03         public ActionResult Index()
 
    04         {
 
    05             return View();
 
    06         }
 
    07  
 
    08         [HttpPost]
 
    09         public ActionResult upload(HttpPostedFileBase Filedata)
 
    10         {
 
    11             try
 
    12             {
 
    13                 Image image = Image.FromStream(Filedata.InputStream);
 
    14                 stringipath = Path.Combine("Images", Path.GetFileName(Filedata.FileName));
 
    15                 string spath = Path.Combine(HttpContext.Server.MapPath("~"), ipath);
 
    16                 image.Save(spath);
 
    17  
 
    18                 return Json(new{ id = "0", mess = string.Format("{0}{1}/{2}", BaseUrl, "Images", Filedata.FileName), iw = image.Width, ih = image.Height });
 
    19             }
 
    20             catch (Exception ex)
 
    21             {
 
    22                 return Json(new { id = "1", mess = ex.Message });
 
    23             }
 
    24         }
 
    25  
 
    26         public void tryCrop(string img, int x, int y, int w, int h)
 
    27         {
 
    28             Image image = Image.FromFile(Path.Combine(HttpContext.Server.MapPath("~"), "Images", img));
 
    29             Crop(image, w, h, x, y).Save(Path.Combine(HttpContext.Server.MapPath("~"), "Images", "v"+ img));
 
    30  
 
    31             Response.Redirect(string.Format("{0}{1}/{2}", BaseUrl, "Images", "v"+ img));
 
    32         }
 
    33  
 
    34         [NonAction]
 
    35         public string BaseUrl
 
    36         {
 
    37             get
 
    38             {
 
    39                return Request.Url.Scheme + "://"+ Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + '/';
 
    40             }
 
    41         }
 
    42  
 
    43         [NonAction]
 
    44         public static Image Crop(Image image, int width, int height, int x, int y)
 
    45         {
 
    46             Bitmap bmp = new Bitmap(width, height, PixelFormat.Format24bppRgb);
 
    47             bmp.SetResolution(image.HorizontalResolution, image.VerticalResolution);
 
    48  
 
    49             using (Graphics graphic = Graphics.FromImage(bmp))
 
    50             {
 
    51                 graphic.SmoothingMode = SmoothingMode.AntiAlias;
 
    52                 graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
 
    53                 graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
 
    54                 graphic.DrawImage(image, newRectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);
 
    55             }
 
    56  
 
    57             return bmp;
 
    58         }
 
    59     }