Asp.net MVC 实现图片上传剪切
嘿嘿，这是本人第一篇博文，请大家多多指教。
使用技术：Asp.net MVC与jquery.uploadify,Jcrop
首先上页面
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>Index</title>
6 <link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css" />
7 <script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js" type="text/javascript"></script>
8 <script src="http://www.cnblogs.com/Js/uploadify/swfobject.js" type="text/javascript"></script>
9 <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>
JS
1 <script type="text/javascript">
2 $(function () {
3 var jcrop_api, boundx, boundy;
4
5 function updateCoords(c) {
6 $('#x').val(c.x);
7 $('#y').val(c.y);
8 $('#w').val(c.w);
9 $('#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) {
44 $('#img-up').remove();
47 $('#img-crop').css("display", "block");
48 /* 绑定图片名称 */
49 var iname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);
50 $('#img').val(iname);
51 /* 加载原始图片 */
52 $('#img-preview,#img-uploadify').attr("src", result.mess);
53 /* 加载剪裁插件 */
54 $('#img-uploadify').Jcrop({
55 onChange: updatePreview,
56 onSelect: updatePreview,
57 aspectRatio: 1,
58 onSelect: updateCoords,
59 setSelect: [0, 0, 200, 200]
60 }, function () {
61 var bounds = this.getBounds();
62 boundx = bounds[0];
63 boundy = bounds[1];
64 jcrop_api = this;
65 });
66 } else if ('1' == result.id) {
67 /* 异常信息提示 */
68 alert(result.mess)
69 }
70 }
71 });
72 });
73 </script>
Controller
1 public class CropController : Controller
2 {
3 public ActionResult Index()
4 {
5 return View();
6 }
7
8 [HttpPost]
9 public ActionResult upload(HttpPostedFileBase Filedata)
10 {
11 try
12 {
13 Image image = Image.FromStream(Filedata.InputStream);
14 string ipath = 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, new Rectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);
55 }
56
57 return bmp;
58 }
59 }
打完收工......
