Asp.net MVC 实现图片上传剪切
使用技术：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>JS<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>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; } }转自：http://www.cnblogs.com/yoer/archive/2012/02/18/asp_net_mvc_image_upload_crop.html