很多SNS网站,可以上传头像,微博也是一样,上传的头像经自由裁剪合适后,自动生成多种不同尺寸高质量清晰的,如大中小。
效果如下:(下载链接在最下面)
实现:
页面代码:
<p class="phototxt">选择你要上传的头像</p>
<div class="upfile">
@using (Html.BeginForm("uploadHead", "ucenter", FormMethod.Post, new { ID = "user_head_form", enctype = "multipart/form-data" })){
<input type="file" name="head" class="filebtn" onchange="$('#user_head_upload_box').hide();$('#user_head_show_box').show();$('#user_head_form').submit();" />
<input type="button" class="upimgbtn" value="上传头像" />
}
</div>
<div class="sysbtn">
@using (Html.BeginForm("saveHead", "ucenter", FormMethod.Post, new { ID = "user_head_param_form", enctype = "multipart/form-data" }))
{
@Html.HiddenFor(model => model.headFileName, new { id = "head_name" })
@Html.HiddenFor(model => model.x, new { id = "head_x" })
@Html.HiddenFor(model => model.y, new { id = "head_y" })
@Html.HiddenFor(model => model.width, new { id = "head_width" })
@Html.HiddenFor(model => model.height, new { id = "head_height" })
<input type="submit" class="btnyes" value="保存">
<input type="button" class="btnno" value="取消" onclick="cancelHead();">
}
</div>
section Scripts
{
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")"></script>
<script src="@Url.Content("~/Scripts/imgareaselect/jquery.imgareaselect.pack.js")"></script>
<script src="@Url.Content("~/Scripts/head.js")"></script>
<script src="@Url.Content("~/Scripts/popup.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#user_head_form").ajaxForm({
success: function (data) {
$('#user_head_upload_box').show();
$('#user_head_show_box').hide();
if (data != undefined && data != null) {
if (data.msg == 0) {
showreward("<span class=\"g_error\">请上传图片!</span>");
} else if (data.msg == -1) {
showreward("<span class=\"g_error\">文件格式不对!</span>");
} else if (data.msg == -2) {
showreward("<span class=\"g_error\">上传图片不能超过10M!</span>");
} else if (data.msg == -3) {
showreward("<span class=\"g_error\">出现异常,请稍后再试!!</span>");
} else {
var path = "/avatar/temp/" + data.msg;
$("#head_name").val(data.msg);
UserHeadUtil.initialize(path);
}
}
}
});
$("#user_head_param_form").ajaxForm({
success: function (data) {
if (data.msg == 0) {
showreward("<span class=\"g_error\">网络出现异常,请稍后再试!</span>");
} else if (data.msg == -1) {
showreward("<span class=\"g_error\">系统出现异常,请稍后再试!</span>");
} else {
showreward("<span class=\"g_ok\">修改成功!</span>");
$("img#origin_user_head_75").attr("src", "/avatar/75/" + data);
$("img#top_user_head_25").attr("src", "/avatar/25/" + data);
$('img#user_head_origin').imgAreaSelect({ remove: true });
$("#user_head_show_box").hide();
$("#user_head_upload_box").show();
$("#user_head_origin").attr({
"src": "/Content/img/upload.png",
"width": "100%",
"height": "100%"
});
}
}
});
});
</script>
}
后台代码:
[HttpPost]
public ActionResult uploadHead(HttpPostedFileBase head)//命名和上传控件name 一样
{
try
{
if ((head == null))
{
return Json(new { msg = 0 });
}
else
{
var supportedTypes = new[] { "jpg", "jpeg", "png", "gif","bmp" };
var fileExt = System.IO.Path.GetExtension(head.FileName).Substring(1);
if (!supportedTypes.Contains(fileExt))
{
return Json(new { msg = -1 });
}
if (head.ContentLength > 1024 * 1000 * 10)
{
return Json(new { msg = -2 });
}
Random r = new Random();
var filename = DateTime.Now.ToString("yyyyMMddHHmmss") + r.Next(10000) + "." + fileExt;
var filepath = Path.Combine(Server.MapPath("~/avatar/temp"), filename);
head.SaveAs(filepath);
return Json(new { msg = filename });
}
}
catch (Exception)
{
return Json(new { msg = -3 });
}
}
注意:
ajaxForm 提交时 ContentType 去掉这些属性就可以了 裸奔才行 不设置 application/json 或者 text/html
[HttpPost]
[ValidateInput(false)]
public ActionResult saveHead()
{
UploadImageModel model = new UploadImageModel();
model.headFileName = Request.Form["headFileName"].ToString();
model.x = Convert.ToInt32(Request.Form["x"]);
model.y = Convert.ToInt32(Request.Form["y"]);
model.width = Convert.ToInt32(Request.Form["width"]);
model.height = Convert.ToInt32(Request.Form["height"]);
if ((model == null))
{
return Json(new { msg = 0 });
}
else
{
var filepath = Path.Combine(Server.MapPath("~/avatar/temp"), model.headFileName);
string fileExt = Path.GetExtension(filepath);
Random r = new Random();
var filename = DateTime.Now.ToString("yyyyMMddHHmmss") + r.Next(10000) + fileExt;
var path180 = Path.Combine(Server.MapPath("~/avatar/180"), filename);
var path75 = Path.Combine(Server.MapPath("~/avatar/75"), filename);
var path50 = Path.Combine(Server.MapPath("~/avatar/50"), filename);
var path25 = Path.Combine(Server.MapPath("~/avatar/25"), filename);
cutAvatar(filepath, model.x, model.y, model.width, model.height, 75L, path180, 180);
cutAvatar(filepath, model.x, model.y, model.width, model.height, 75L, path75, 75);
cutAvatar(filepath, model.x, model.y, model.width, model.height, 75L, path50, 50);
cutAvatar(filepath, model.x, model.y, model.width, model.height, 75L, path25, 25);
return Json(new { msg = 1 });
}
}
/// <summary>
/// 创建缩略图
/// </summary>
public void cutAvatar(string imgSrc, int x, int y, int width, int height, long Quality, string SavePath, int t)
{
Image original = Image.FromFile(imgSrc);
Bitmap img = new Bitmap(t, t, PixelFormat.Format24bppRgb);
img.MakeTransparent(img.GetPixel(0, 0));
img.SetResolution(72, 72);
using (Graphics gr = Graphics.FromImage(img))
{
if (original.RawFormat.Equals(ImageFormat.Jpeg) || original.RawFormat.Equals(ImageFormat.Png)|| original.RawFormat.Equals(ImageFormat.Bmp))
{
gr.Clear(Color.Transparent);
}
if (original.RawFormat.Equals(ImageFormat.Gif))
{
gr.Clear(Color.White);
}
gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
gr.SmoothingMode = SmoothingMode.AntiAlias;
gr.CompositingQuality = CompositingQuality.HighQuality;
gr.PixelOffsetMode = PixelOffsetMode.HighQuality;
gr.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;
using (var attribute = new System.Drawing.Imaging.ImageAttributes())
{
attribute.SetWrapMode(WrapMode.TileFlipXY);
gr.DrawImage(original, new Rectangle(0, 0, t, t), x, y, width, height, GraphicsUnit.Pixel, attribute);
}
}
ImageCodecInfo myImageCodecInfo = GetEncoderInfo("image/jpeg");
if (original.RawFormat.Equals(ImageFormat.Jpeg))
{
myImageCodecInfo = GetEncoderInfo("image/jpeg");
}
else
if (original.RawFormat.Equals(ImageFormat.Png))
{
myImageCodecInfo = GetEncoderInfo("image/png");
}
else
if (original.RawFormat.Equals(ImageFormat.Gif))
{
myImageCodecInfo = GetEncoderInfo("image/gif");
}else
if (original.RawFormat.Equals(ImageFormat.Bmp))
{
myImageCodecInfo = GetEncoderInfo("image/bmp");
}
Encoder myEncoder = Encoder.Quality;
EncoderParameters myEncoderParameters = new EncoderParameters(1);
EncoderParameter myEncoderParameter = new EncoderParameter(myEncoder, Quality);
myEncoderParameters.Param[0] = myEncoderParameter;
img.Save(SavePath, myImageCodecInfo, myEncoderParameters);
}
//根据长宽自适应 按原图比例缩放
private static Size GetThumbnailSize(System.Drawing.Image original, int desiredWidth, int desiredHeight)
{
var widthScale = (double)desiredWidth / original.Width;
var heightScale = (double)desiredHeight / original.Height;
var scale = widthScale < heightScale ? widthScale : heightScale;
return new Size
{
Width = (int)(scale * original.Width),
Height = (int)(scale * original.Height)
};
}
private static ImageCodecInfo GetEncoderInfo(String mimeType)
{
int j;
ImageCodecInfo[] encoders;
encoders = ImageCodecInfo.GetImageEncoders();
for (j = 0; j < encoders.Length; ++j)
{
if (encoders[j].MimeType == mimeType)
return encoders[j];
}
return null;
}
}
前端脚本:
//原图/缩略图 的比例 >=1
var UserHeadUtil = {
ratio: 1,
view_H:300,
view_W:300,
initialize:function(path){
$("#user_head_origin").attr("src", path);
$("#user_head_upload_box").hide();
$("#user_head_show_box").show();
$("#user_head_25").attr("src", path);
$("#user_head_50").attr("src", path);
$("#user_head_75").attr("src", path);
$("#user_head_180").attr("src", path);
var img = new Image();
img.src = path;
if(img.width==0){
var obj = this;
img.onload = function(){
obj.imgOperate(img);
};
}else{
this.imgOperate(img);
}
},
imgOperate:function(img){
if(img){
this.resize('user_head_origin', img.width, img.height, 300, 300);
var x=0,y=0,size=0;
if(this.view_W > this.view_H ){
x = (this.view_W - this.view_H)/2;
size = this.view_H;
}else if(this.view_W < this.view_H){
y = (this.view_H - this.view_W)/2;
size = this.view_W;
}else{
size = this.view_W;
}
var obj = this;
$('img#user_head_origin').imgAreaSelect({
aspectRatio:"1:1",
handles: "corners",
persistent:true,
show:true,
imageWidth: obj.view_W,
imageHeight: obj.view_H,
x1: x,
y1: y,
x2: x + size,
y2: y + size,
onSelectChange: function(img, selection){
obj.preview('user_head_25', obj.view_W, obj.view_H, selection.x1, selection.y1, selection.width, selection.height, 25, 25);
obj.preview('user_head_50', obj.view_W, obj.view_H, selection.x1, selection.y1, selection.width, selection.height, 50, 50);
obj.preview('user_head_75', obj.view_W, obj.view_H, selection.x1, selection.y1, selection.width, selection.height, 75, 75);
obj.preview('user_head_180', obj.view_W, obj.view_H, selection.x1, selection.y1, selection.width, selection.height, 180, 180);
obj.setCutParams(selection.x1, selection.y1, selection.width, selection.height);
}
});
this.preview('user_head_25', this.view_W, this.view_H, x, y, size, size, 25, 25);
this.preview('user_head_50', this.view_W, this.view_H, x, y, size, size, 50, 50);
this.preview('user_head_75', this.view_W, this.view_H, x, y, size, size, 75, 75);
this.preview('user_head_180', this.view_W, this.view_H, x, y, size, size, 180, 180);
this.setCutParams(x, y, size, size);
}
},
resize:function(id, width, height, limit_W, limit_H){
if(width>0 && height>0){
if(width/height >= limit_W/limit_H){
if(width > limit_W){
this.view_W = limit_W;
this.view_H = (limit_W/width)*height;
}
}else{
if(height > limit_H){
this.view_H = limit_H;
this.view_W = (limit_H/height)*width;
}
}
$('#'+id).attr( {
"width" : this.view_W,
"height" : this.view_H
});
this.ratio = width / this.view_W;
}
},
preview:function(id, width, height, x, y, cut_W, cut_H, show_W, show_H){
var scaleX = show_W / (cut_W * this.ratio || 1);
var scaleY = show_H / (cut_H * this.ratio || 1);
$('#'+id).css({
width: Math.round(scaleX * width * this.ratio) + 'px',
height: Math.round(scaleY * height * this.ratio) + 'px',
marginLeft: '-' + Math.round(scaleX * x * this.ratio) + 'px',
marginTop: '-' + Math.round(scaleY * y * this.ratio) + 'px'
});
},
setCutParams:function(x, y, width, height){
$('#head_x').val(Math.round(x * this.ratio));
$('#head_y').val(Math.round(y * this.ratio));
$('#head_width').val(Math.round(width * this.ratio));
$('#head_height').val(Math.round(height * this.ratio));
}
};
function cancelHead(){
// window.location.reload();
$('img#user_head_origin').imgAreaSelect({ remove: true });
$("#user_head_show_box").hide();
$("#user_head_upload_box").show();
$("#user_head_origin").attr({
"src": "/Content/img/upload.png",
"width" : "100%",
"height" : "100%"
});
var path = $("img#origin_user_head_75").attr("src");
var index = path.lastIndexOf("/");
if(index!=-1){
var name = path.substring(index+1);
$("#user_head_25").attr("src", "/headphone/25/"+name).css({
width: 25 + 'px',
height: 25 + 'px',
marginLeft: 0,
marginTop: 0
});
$("#user_head_50").attr("src", "/headphone/50/" + name).css({
width: 50 + 'px',
height: 50 + 'px',
marginLeft: 0,
marginTop: 0
});
$("#user_head_75").attr("src", "/headphone/75/" + name).css({
width: 75 + 'px',
height: 75 + 'px',
marginLeft: 0,
marginTop: 0
});
$("#user_head_180").attr("src", "/headphone/180/" + name).css({
width: 180 + 'px',
height: 180 + 'px',
marginLeft: 0,
marginTop: 0
});
}
}
下载地址:
CSDN: http://download.csdn.net/download/zengzhan/5109105
BAIDU share:http://pan.baidu.com/share/link?shareid=389586&uk=2735096069
更多关于多种文件上传,分类到这里 http://www.cnblogs.com/zengxiangzhan/category/269831.html
附加 update 2016-08-08
方案使用 Jcrop 2.0.x 更成熟
<script src="js/Jcrop/Jcrop.min.js"></script>
<link href="js/Jcrop/Jcrop.min.css"rel="stylesheet" />
高级使用方法
var m, jcrop_api, r = 172 / 120;
functionaddImgAreaSelect() {
$('.upload-pic-content').on('cropmove cropend', function(e, s, c) {
preview(s, c);
});
$('#user_head_origin').Jcrop({
aspectRatio: r,
minSize: [43, 30],
boxWidth: 444,
boxHeight: 320,
setSelect: [0, 0, 0, 0]
}, function() {
jcrop_api = this;
init_interface();
});
functioninit_interface() {
//c_w 压缩图片宽 xscale 原图片/压缩图片 比
var i =jcrop_api.getContainerSize();
c_w = Math.round(i[0]),
c_h = Math.round(i[1]),
xscale =jcrop_api.opt.xscale,
yscale =jcrop_api.opt.yscale,
w = 0,
h = 0,
x = 0,
y = 0,
c_w >= Math.floor(c_h * r) ? (x = (c_w - c_h * r) * xscale / 2, h = c_h * yscale, w = Math.round(h * r)) : (y = (c_h - c_w / r) * yscale / 2, w = c_w * xscale, h = Math.round(w /r));
jcrop_api.setSelect([x, y, w, h]);
}
}
functionjcropDestroy() {
jcrop_api &&jcrop_api.destroy()
}
functionpreview(s, c) {
if (!c.w || !c.h)
return;
var cw = (s.core.opt.xscale *s.core.container.width());
var ch = (s.core.opt.yscale *s.core.container.height());
var scaleX = 172 /c.w;
var scaleY = 120 /c.h;
$('#user_head_150').css({
width: Math.round(scaleX *cw),
height: Math.round(scaleY *ch),
marginLeft: -Math.round(scaleX *c.x),
marginTop: -Math.round(scaleY *c.y)
});
$('#head_x').val(c.x);
$('#head_y').val(c.y);
$('#head_width').val(c.w);
$('#head_height').val(c.h);
}
类似微博九宫图最大化居中按比例缩略图
int sourceWidth =OriginalImage.Width;
int sourceHeight =OriginalImage.Height;
int destWidth = 0;
int destHeight = 0;
int destX = 0;
int destY = 0;
double o_scale = (double)sourceWidth / (double)sourceHeight;
double scale = (double)Width / (double)Height;
if (o_scale >=scale)
{
//原图长宽比大于或者等于缩略图长宽比,则按照宽度优先 (长>高)
destX = (int)Math.Ceiling((sourceWidth - sourceHeight * scale) /2f);
destWidth = (int)Math.Ceiling(sourceHeight *scale);
destHeight =sourceHeight;
}
else{
//原图长宽比小于缩略图长宽比,则按照高度优先 (长<=高)
destY = (int)Math.Ceiling((sourceHeight - sourceWidth / scale) /2f);
destWidth =sourceWidth;
destHeight = (int)Math.Ceiling(sourceWidth /scale);
}
更新 2017-11-29:
解决:
functionjcropDestroy() {
jcrop_api &&jcrop_api.destroy();
$.Jcrop.component.DragState.prototype.touch = null;
}
//修复 iPhone and/or Android 移动端 拍照 后 图片 横竖颠倒
/// <summary>
///Rotate the given bitmap according to Exif Orientation data
/// </summary>
/// <param name="img">source image</param>
/// <param name="updateExifData">set it to TRUE to update image Exif data after rotation (default is TRUE)</param>
/// <returns>The RotateFlipType value corresponding to the applied rotation. If no rotation occurred, RotateFlipType.RotateNoneFlipNone will be returned.</returns>
public static RotateFlipType RotateImageByExifOrientationData(Image img, bool updateExifData = true)
{
int orientationId = 0x0112;
var fType =RotateFlipType.RotateNoneFlipNone;
if(img.PropertyIdList.Contains(orientationId))
{
var pItem =img.GetPropertyItem(orientationId);
fType = GetRotateFlipTypeByExifOrientationData(pItem.Value[0]);
if (fType !=RotateFlipType.RotateNoneFlipNone)
{
img.RotateFlip(fType);
if (updateExifData) img.RemovePropertyItem(orientationId); //Remove Exif orientation tag
}
}
returnfType;
}
/// <summary>
///Return the proper System.Drawing.RotateFlipType according to given orientation EXIF metadata
/// </summary>
/// <param name="orientation">Exif "Orientation"</param>
/// <returns>the corresponding System.Drawing.RotateFlipType enum value</returns>
public static RotateFlipType GetRotateFlipTypeByExifOrientationData(intorientation)
{
switch(orientation)
{
case 1:
default:
returnRotateFlipType.RotateNoneFlipNone;
case 2:
returnRotateFlipType.RotateNoneFlipX;
case 3:
returnRotateFlipType.Rotate180FlipNone;
case 4:
returnRotateFlipType.Rotate180FlipX;
case 5:
returnRotateFlipType.Rotate90FlipX;
case 6:
returnRotateFlipType.Rotate90FlipNone;
case 7:
returnRotateFlipType.Rotate270FlipX;
case 8:
returnRotateFlipType.Rotate270FlipNone;
}
}
用法:
//修复 iPhone and/or Android 移动端 拍照 后 图片 横竖颠倒
RotateFlipType fType = RotateImageByExifOrientationData(img, true);
if (fType !=RotateFlipType.RotateNoneFlipNone)
{
Thumbnail.SaveImg(img, path_original, img.Width, img.Height, 100L);
}
else{
Thumbnail.SaveImg(img, path_original, img.Width, img.Height, 100L);
}
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/zengxiangzhan/archive/2013/03/04/2943564.html
内容来源于网络,如有侵权,请联系作者删除!