使用了两个插件
1.文件上传插件uploadify
2.图像编辑插件jquery.Jcrop
基于Asp.net的mvc设计模式，设计了该插件
下面贴代码：
view（.cshtml）：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="~/Bootstrap/jquery.Jcrop.min.css" rel="stylesheet" />
<link href="~/Bootstrap/uploadify.css" rel="stylesheet" />
@{
ViewBag.Title = "上传头像";
}
</head>
<div class="content animate-panel">
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-heading">
修改头像
</div>
<div class="panel-body">
<img id="img-uploadify" src=‘~/Res/@(User.Identity.Name)Portrait.jpg‘ class="center-block">
<div id="img-up" class="pull-left">
<input type="file" id="uploadify" name="uploadify" />
<div id="fileQueue">
</div>
</div>
<div id="img-crop" class="pull-right ">
@*<div id="img-prev-container">
<img class="img-circle m-b " id="img-preview" />
</div>*@
<div>
<form action="/Account/tryCrop" method="post" onsubmit="return checkCoords()">
<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="保存为头像" class="btn btn-success" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section Scripts {
<script src="~/Bootstrap/jquery.uploadify.js"></script>
<script src="~/Bootstrap/jquery.Jcrop.min.js"></script>
<script>z`
var boundx;
var boundy;
function updateCoords(c) {
$(‘#x‘).val(c.x);
$(‘#y‘).val(c.y);
$(‘#w‘).val(c.w);
$(‘#h‘).val(c.h);
};
function checkCoords() {
if (parseInt($(‘#w‘).val())) {
return true;
};
alert(‘请先选择要裁剪的区域后，再提交。‘);
return false;
};
function updatePreview(c) {
if (parseInt(c.w) > 0) {
/* 商必须与img-preview宽高一致 */
c.w;
c.h;
$(‘#img-preview‘).css({
width: ‘96px‘,
height: ‘96px‘,
});
}
};
$("#uploadify").uploadify({
‘swf‘: ‘/Bootstrap/uploadify.swf‘,
‘uploader‘: ‘/Account/Upload‘, //图片上传的action方法
‘buttonClass‘: ‘btn btn-success ‘,
‘folder‘: ‘Images‘,
‘queueID‘: ‘fileQueue‘,
‘auto‘: true,
‘buttonText‘: ‘上传图片‘,
‘queueSizeLimit‘: 1,
‘multi‘: false,
‘fileTypeDesc‘: ‘jpg,png‘,
‘fileTypeExts‘: ‘*.jpg;*.png‘,
‘fileSizeLimit‘: ‘1MB‘,
‘onUploadSuccess‘: function (file, data, response) {
var result = eval(‘(‘ + data + ‘)‘);
if (‘0‘ == result.id) {
$(‘#img-crop‘).css("display", "block");
/* 绑定图片名称 */
var iname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);
$(‘#img‘).val(result.mess);
/* 加载原始图片 */
$(‘#img-preview,#img-uploadify‘).attr("src", result.mess);
/* 加载剪裁插件 */
$(‘#img-uploadify‘).Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
onSelect: updateCoords,
setSelect: [0, 0, 100, 100]
}, function () {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
} else if (‘1‘ == result.id) {
/* 异常信息提示 */
alert(result.mess)
}
}
});
</script>
}
<style>
.jcrop-holder {
display: block;
margin-right: auto;
margin-left: auto;
}
</style>
controller:
public ActionResult UploadPortrait()
{
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(System.AppDomain.CurrentDomain.BaseDirectory, 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 ActionResult tryCrop(string img, int x, int y, int w, int h)
{
var imgPath = img.Split(‘/‘);
Image image = Image.FromFile(Path.Combine(HttpContext.Server.MapPath("~"), "Images", imgPath[imgPath.Count() - 1]));
Crop(image, w, h, x, y).Save(Path.Combine(HttpContext.Server.MapPath("~"), "Res", User.Identity.Name + "Portrait.jpg"));
return RedirectToAction("Example", "Account");
}
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(96, 96, 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, 96, 96), x, y, width, height, GraphicsUnit.Pixel);
}
return bmp;
}
时间： 2024-10-12 21:29:24