很多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 }); } }
相关推荐
在本文中，我们将深入探讨如何在ASP.NET MVC4框架下实现图片上传并自动生成不同尺寸的功能。这个功能在很多社交网络服务（SNS）和微博应用中非常常见，用户可以上传头像，然后系统会自动处理成不同大小的版本，以...
在本文中，我们将深入探讨如何基于Springmvc实现图片上传及生成缩略图的功能。Springmvc是Spring框架的一个重要模块，用于构建MVC模式的Web应用，它提供了强大的数据绑定、模型映射、视图渲染等功能，是Java开发中的...
在这个特定的场景中，"JSP上传图片并生成缩略图"是一个常见的功能需求，尤其是在开发包含用户交互和多媒体内容的Web应用时。下面我们将详细探讨这一技术实现的关键知识点。 首先，**上传组件**是Web应用中用于接收...
* 修改后：当出现这种情况后，图片会按最小边进行缩略，即如果原图高为150，宽为150，要求宽150，高120，那生成的图片就是120*120。总之，就是不会出现网页被 * 撑破的或变形的情况。 * * 使用方法： * zoom...
当用户上传图片后，控制器可以调用服务层（Model）的方法，该方法利用图像处理库（如ImageSharp或System.Drawing）来裁剪和调整图片大小，生成缩略图。生成的缩略图可以存储在服务器上，并将路径返回给View（视图）...
在这个主题中，我们将深入探讨如何在MVC和.NET Core环境下实现网页转PDF、PDF转图片、图片加水印、生成二维码以及创建缩略图等实用功能。 1. **网页转PDF** 在.NET Core中，可以使用第三方库如HtmlToPdfConverter...
上传后，可能需要对图片进行缩略图生成、尺寸调整、质量优化等操作，以节省存储空间和提高加载速度。可以使用第三方库如ImageMagick或System.Drawing namespace进行图片处理。 9. **错误处理**： 必须妥善处理...
动态缩略图是一种在网页或应用中常见的技术，它允许用户根据需要查看不同尺寸的图片，通常是缩小版的原图，以节省加载时间并优化用户体验。在Java中实现动态缩略图涉及到图像处理和流媒体技术。下面我们将深入探讨这...
- 当用户选择文件后，可以在前端实现一个预览功能，根据选择的文件生成图片的缩略图展示给用户，这需要使用JavaScript或jQuery等技术。 - 表单提交至服务器后，后端控制器需要接收上传的文件。文件被存储到服务器的...
在ASP.NET MVC 4中实现图片上传功能是常见的需求，尤其在用户交互丰富的网站中，如社交媒体、电商网站等。本UploadDemo正是针对这一需求而创建的，旨在为初学者提供一个实用的MVC图片上传示例。 在ASP.NET MVC 4中...
在生成缩略图时，需要注意保持图片比例，防止变形，并可以设置固定的宽度或高度。 4. **WebApplication3**：这可能是一个基于某种Web框架（如ASP.NET MVC、Spring Boot等）的项目名称，表示一个实现了上述功能的...
"一键自动生成MVC"的功能则是为了简化这个过程，通过自动化工具帮助开发者快速生成MVC结构的代码，提高开发效率。 **1. MVC模式详解** - **模型（Model）**：负责处理业务逻辑和数据操作。它与数据库交互，获取和...
在IT行业中，根据中文首字生成图片是一种常见的个性化定制服务，尤其在用户头像生成、社交媒体标识等方面有广泛应用。这个场景需求通常涉及到图像处理、文本处理以及编程技术。以下是相关知识点的详细介绍： 1. **...
在本文中，我们将深入探讨如何使用ThinkPHP框架结合AJAX技术实现图片上传并生成缩略图的功能。这个功能尤其有用，因为许多现代浏览器不再支持Flash插件，而AJAX提供了更稳定、更友好的用户体验。 首先，让我们了解...
// 实际应用中可能需要调整尺寸或使用ImageMagick等库生成缩略图 } } return Json(new { success = true }); // 返回JSON响应，告知前端上传是否成功 } ``` 至于**缩略图**的生成，你可以选择在服务器端或者...
用户上传图片后，服务器端代码会处理图片，生成缩略图并添加水印，最后返回给客户端。 总结： 本教程详细介绍了如何使用C# ASP.NET来生成图片缩略图并添加水印。通过结合System.Drawing库，我们可以轻松地实现这一...
在Web开发中，图片上传功能是非常常见且实用的，而生成缩略图则是对上传图片进行处理的重要环节，可以有效节省服务器存储空间并优化显示效果。本篇文章将详细介绍如何在Struts框架下实现图片上传并生成缩略图的功能...
以上就是使用ASP.NET MVC上传图片到数据库的基本步骤。在实际开发中，还需要考虑错误处理、文件大小限制、图片格式验证等细节。同时，为了提高性能和用户体验，有时会将图片存储在文件系统，只在数据库中存储路径，...
当我们谈论"mvc代码自动生成"时，通常指的是利用工具或库自动化创建DAO（数据访问对象）、Service和Controller层的代码，从而减少手动编写这些常见组件的时间和错误。 **DAO层**： DAO层是应用程序与数据库交互的...