本著簡潔直接，我們就直奔主題吧，這裡需要使用到一個網頁線上截圖插件imgareaselect（請自行下載）。 前臺頁面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/img ...
本著簡潔直接，我們就直奔主題吧，這裡需要使用到一個網頁線上截圖插件imgareaselect（請自行下載）。
前臺頁面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/imgareaselect-default.css" /> </head> <body style="text-align:center;margin-top:200px;"> <img id="preview_img" class="update-pic" src="img/default.jpg" /> <form action="/User/UpdatePic" method="post" enctype="multipart/form-data" onsubmit="return Checkform()"> <input type="hidden" id="x1" name="x1" value="0" /> <input type="hidden" id="y1" name="y1" value="0" /> <input type="hidden" id="x2" name="x2" value="0" /> <input type="hidden" id="y2" name="y2" value="0" /> <input type="file" name="pictureFile" id="pictureFile" style="display:none;" value="" onchange="SelectPicture();" /> <div class="form-group text-center"> <button type="button" class="templatemo-white-button" onclick="document.getElementById('pictureFile').click();">選擇</button> <button type="submit" class="templatemo-blue-button">提交</button> </div> </form> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> var img = new Image(); var imgWidth = 0; var imgHeight = 0; InitPicture();//初始化圖片 function Checkform() { //檢查是否合法 //... return false; } //選擇和設置圖片 function SelectPicture() { var pic = document.getElementById("pictureFile"); if (pic.value == "") { return false; } //篩選圖片 var strs = pic.value.split("."); var fileExt = strs[strs.length - 1].toLowerCase(); if (fileExt != "jpg" && fileExt != "png") { alert("錯誤提示:選擇的文件格式不正確!"); return false; } //設置圖片 var url = getFileUrl("pictureFile"); document.getElementById("preview_img").src = url; img.src = url; img.onload = function () { if (this.width > this.height) { imgWidth = 280; imgHeight = parseInt(280 * (this.height / this.width)); document.getElementById("preview_img").style.width = "280px"; document.getElementById("preview_img").style.height = imgHeight + "px"; } else { imgHeight = 280; imgWidth = parseInt(280 * (this.width / this.height)); document.getElementById("preview_img").style.height = "280px"; document.getElementById("preview_img").style.width = imgWidth + "px"; } InitPicture(); }; } //初始化圖片 function InitPicture() { $('#preview_img').imgAreaSelect({ minWidth: 50,//最小寬度 minHeight: 50,//最小高度 aspectRatio: '1:1',//寬高之比1:1 onSelectEnd: function (img, selection) { $('input[name="x1"]').val(selection.x1);//綁定選中的值 $('input[name="y1"]').val(selection.y1); $('input[name="x2"]').val(selection.x2); $('input[name="y2"]').val(selection.y2); } }); } //獲取本地圖片的url function getFileUrl(sourceId) { var url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE url = document.getElementById(sourceId).value; } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } </script> </body> </html>View Code
要使用imgareaselect插件上傳文件主要要引入了imgareaselect-default.css、jquery.imgareaselect.pack.js以及jquery-2.1.1.min.js三個文件。
圖片呈現在頁面上進行了等比例的放縮（長或寬放縮為280px）。
頁面效果圖：
後臺處理代碼：
//更新用戶頭像 [HttpPost] public ActionResult UpdatePicture(int x1, int y1, int x2, int y2, HttpPostedFileBase pictureFile) { if (pictureFile != null && pictureFile.ContentLength > 0) { if (pictureFile.ContentLength > 5242880) { return Content("<script>alert('錯誤提示:文件大小超出指定範圍!');</script>"); } string fileName = pictureFile.FileName.Split('\\').Last(); string fileExt = fileName.Substring(fileName.LastIndexOf('.')).ToLower(); if (fileExt == ".jpg" || fileExt == ".png") { string path = Server.MapPath("~/Resources/HeadPicture"); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } fileName = DateTime.Now.ToFileTime().ToString() + Guid.NewGuid().ToString("N") + fileExt; var picPath = Path.Combine(path, fileName); pictureFile.SaveAs(picPath);//從客戶端保存文件到本地 //檢查裁剪圖片是否合法並裁剪圖片 var image = new WebImage(picPath); double height = image.Height; double width = image.Width; if (width > height) { height = (int)(280 * (height / width)); width = 280; } else { width = (int)(280 * (width / height)); height = 280; } image.Resize((int)width, (int)height);//調整圖片大小 var length = x2 - x1; if (x1 >= 0 && x1 <= 280 && y1 >= 0 && y1 <= 280 && length >= 50 && length <= 280 && x1 + length <= width && y1 + length <= height) { image.Crop(y1, x1, (int)(height - y1 - length), (int)(width - x1 - length)); image.Save(picPath); var logined = entity.Users.Find(Convert.ToInt32(User.Identity.Name)); logined.Picture = fileName; entity.SaveChanges(); return Content("<script>alert('操作成功提示:成功更新照片!');</script>"); } else { System.IO.File.Delete(picPath); return Content("<script>alert('錯誤提示:上傳的圖片信息不合法!');</script>"); } } else { return Content("<script>alert('錯誤提示:上傳的文件格式不正確!');</script>"); } } else { return Content("<script>alert('錯誤提示:上傳的文件是空文件!');</script>"); } }View Code
上面代碼是一個用戶頭像更新的代碼，也是先將圖片等比例放縮（長或寬放縮為280px），也前臺頁面上面的圖片相對應，然後再進行裁剪。
第一次團隊合作ASP.NET MVC 網站開發總結就到這裡吧。
<我的博客主頁>:http://www.cnblogs.com/forcheng/
