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

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

27
             height: 500px;

28
             background-color: #e8f0f6;

29
             text-align: center;

30
 }

31
         #img-prev-container

32
 {

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

01
public 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
     }

转自：http://www.cnblogs.com/yoer/archive/2012/02/18/asp_net_mvc_image_upload_crop.html