本着简洁直接，我们就直奔主题吧，这里需要使用到一个网页在线截图插件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>
要使用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>");
}
}
上面代码是一个用户头像更新的代码，也是先将图片等比例放缩（长或宽放缩为280px），也前台页面上面的图片相对应，然后再进行裁剪。
第一次团队合作ASP.NET MVC 网站开发总结就到这里吧。
<我的博客主页>:http://www.cnblogs.com/forcheng/
时间： 2024-12-26 20:27:34