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

JS

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

posted @ 2014-04-13 14:26  Ranran  阅读(750)  评论(0)    收藏  举报