接上一篇文章asp.net uploadify实现多附件上传功能完成后，又突然用到头像上传并在线裁剪。在网上找个众多例子都没有符合要求的，有一篇文章写的不错,Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包),大家可以看下
2、组成
首先说明一下代码实现所用到的技术，仅供参考：
开发工具：vs2010
目标框架：.NET Framework3.5
jcrop：Jcrop.js v0.9.12
Uploadify：uploadify-v3.1
Jquery：jquery-1.9.0.js
最后我会将整个Demo上传，如果同学们的电脑上有开发环境可直接打开项目解决方案运行。
3、代码
Default.aspx（测试页面）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ImgJcrop._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>在线裁剪</title> <link href="https://www.jb51.net/Scripts/jcrop/jquery.Jcrop.css" type="text/css" /> <link href="https://www.jb51.net/Scripts/uploadify-v3.1/uploadify.css" type="text/css" /> <script src="https://www.jb51.net/Scripts/jquery.1.9.0.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/Scripts/jcrop/jquery.Jcrop.js" type="text/javascript"></script> <script src="https://www.jb51.net/Scripts/uploadify-v3.1/jquery.uploadify-3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var jcrop_api, boundx, boundy; $("#file_upload").uploadify({ "auto": true, "buttonText": "选择图片", "swf": "Scripts/uploadify-v3.1/uploadify.swf", "uploader": "App_Handler/Uploadify.ashx?action=upload", "fileTypeExts": "*.jpg; *.jpeg; *.gif; *.png; *.bmp", "fileTypeDesc": "支持的格式：", "multi": false, "removeCompleted": false, "onUploadStart": function (file) { $("#file_upload-queue").hide(); }, "onUploadSuccess": function (file, data, response) { var row = eval("[" + data + "]"); if (row[0]["status"] == 0) { $("#cutimg").html("<img id=\"imgOriginal\" name=\"imgOriginal\" /><div style=\"overflow: hidden; margin-top: 20px;\"><div style=\"width: 120px; height: 120px; overflow: hidden;\"><img id=\"imgPreview\" /></div><br /><input type=\"button\" id=\"btnImgCut\" onclick=\"cutSaveImg()\" value=\"裁剪并保存图片\" /></div>"); $("#cutimg img").each(function () { $(this).attr("src", row[0]["message"]); }); $("#hidImgUrl").val(row[0]["message"]); $('#imgOriginal').Jcrop({ onChange: updatePreview, onSelect: updatePreview, aspectRatio: 1, //maxSize: [120, 120], setSelect: [0, 0, 120, 120] }, function () { var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; jcrop_api = this; }); } else { alert(row[0]["message"]); } } }); function updatePreview(c) { if (parseInt(c.w) > 0) { var rx = 120 / c.w; var ry = 120 / c.h; $("#imgPreview").css({ width: Math.round(rx * boundx) + "px", height: Math.round(ry * boundy) + "px", marginLeft: "-" + Math.round(rx * c.x) + "px", marginTop: "-" + Math.round(ry * c.y) + "px" }); } $("#hidXone").val(c.x); $("#hidYone").val(c.y); $("#hidXtwo").val(c.hidXtwo); $("#hidYtwo").val(c.hidYtwo); $("#hidImgWidth").val(c.w); $("#hidImgHeight").val(c.h); }; }); function cutSaveImg() { $.ajax({ type: "post", url: "App_Handler/Uploadify.ashx?action=cutsaveimg", data: { strImgUrl: $("#imgOriginal")[0].src, hidXone: $("#hidXone").val(), hidYone: $("#hidYone").val(), hidImgWidth: $("#hidImgWidth").val(), hidImgHeight: $("#hidImgHeight").val() }, dataType: "html", success: function (data) { var row = eval("[" + data + "]"); if (row[0]["status"] == 0) { } alert(row[0]["message"]); } }); } </script> </head> <body> <form runat="server"> <div> <input type="file" /> </div> <div> </div> <asp:HiddenField runat="server" /> <asp:HiddenField runat="server" /> <asp:HiddenField runat="server" /> <asp:HiddenField runat="server" /> <asp:HiddenField runat="server" /> <asp:HiddenField runat="server" /> <asp:HiddenField runat="server" /> </form> </body> </html>
Uploadify.ashx（一般处理程序）
<%@ WebHandler Language="C#" %> using System; using System.Collections; using System.Data; using System.Web; using System.Linq; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.SessionState; using System.IO; using System.Collections.Generic; using System.Web.UI.WebControls; using System.Text; using System.Drawing; using System.Drawing.Imaging; public class UploadifyUpload : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; string action = context.Request["action"]; switch (action) { case "upload": //上传图片 upload(context); break; case "cutsaveimg": //裁剪并保存 cutsaveimg(context); break; } context.Response.End(); } /// <summary> /// 上传图片 /// </summary> /// <param></param> private void upload(HttpContext context) { HttpPostedFile postedFile = context.Request.Files["Filedata"]; if (postedFile != null) { string fileName, fileExtension; int fileSize; fileName = postedFile.FileName; fileSize = postedFile.ContentLength; if (fileName != "") { fileExtension = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf('.')); string strPath = context.Server.MapPath("https://www.jb51.net/") + "\\App_File\\Upload\\";//设置文件的路径 string strFileName = "upload" + DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension; string strFileUrl = strPath + strFileName;//保存文件路径 if (!Directory.Exists(strPath)) { Directory.CreateDirectory(strPath); } postedFile.SaveAs(strFileUrl);//先保存源文件 context.Response.Write("{\"status\":0,\"message\":\"/App_File/Upload/" + strFileName + "\"}"); } else { context.Response.Write("{\"status\":1,\"message\":\"上传失败！\"}"); } } else { context.Response.Write("{\"status\":1,\"message\":\"上传失败！\"}"); } } /// <summary> /// 裁剪并保存图片 /// </summary> /// <param></param> private void cutsaveimg(HttpContext context) { string strImgUrl = context.Request["strImgUrl"]; string strXone = context.Request["hidXone"]; string strYone = context.Request["hidYone"]; string strImgWidth = context.Request["hidImgWidth"]; string strImgHeight = context.Request["hidImgHeight"]; string[] urls = strImgUrl.Split('https://www.jb51.net/'); string str_url = urls.Last(); try { string strOldFiel = context.Server.MapPath("~/App_File/Upload/"); string strNewFiel = context.Server.MapPath("~/App_File/Cut/"); string strOldUrl = Path.Combine(strOldFiel, str_url); string strNewUrl = Path.Combine(strNewFiel, "cut" + DateTime.Now.ToString("yyyyMMddHHmmss") + "." + str_url.Split('.')[1]); if (!Directory.Exists(strNewFiel)) { Directory.CreateDirectory(strNewFiel); } int intStartX = int.Parse(strXone); int intStartY = int.Parse(strYone); int intWidth = int.Parse(strImgWidth); int intHeight = int.Parse(strImgHeight); CutGeneratedImage(intStartX, intStartY, intWidth, intHeight, strOldUrl, strNewUrl); context.Response.Write("{\"status\":0,\"message\":\"裁剪成功并保存！\"}"); } catch { context.Response.Write("{\"status\":1,\"message\":\"裁剪失败！\"}"); } } /// <summary> /// 裁剪图片 /// </summary> /// <param>要缩小裁剪图片宽度</param> /// <param>要缩小裁剪图片长度</param> /// <param>要处理图片路径</param> /// <param>处理完毕图片路径</param> public void CutGeneratedImage(int intStartX, int intStartY, int intWidth, int intHeight, string strOldImgUrl, string strNewImgUrl) { //上传标准图大小 int intStandardWidth = 120; int intStandardHeight = 120; int intReduceWidth = 0; // 缩小的宽度 int intReduceHeight = 0; // 缩小的高度 int intCutOutWidth = 0; // 裁剪的宽度 int intCutOutHeight = 0; // 裁剪的高度 int level = 100; //缩略图的质量 1-100的范围 //获得缩小，裁剪大小 if (intStandardHeight * intWidth / intStandardWidth > intHeight) { intReduceWidth = intWidth; intReduceHeight = intStandardHeight * intWidth / intStandardWidth; intCutOutWidth = intWidth; intCutOutHeight = intHeight; } else if (intStandardHeight * intWidth / intStandardWidth < intHeight) { intReduceWidth = intStandardWidth * intHeight / intStandardHeight; intReduceHeight = intHeight; intCutOutWidth = intWidth; intCutOutHeight = intHeight; } else { intReduceWidth = intWidth; intReduceHeight = intHeight; intCutOutWidth = intWidth; intCutOutHeight = intHeight; } //通过连接创建Image对象 //System.Drawing.Image oldimage = System.Drawing.Image.FromFile(strOldImgUrl); //oldimage.Save(Server.MapPath("tepm.jpg")); //oldimage.Dispose(); //缩小图片 Bitmap bm = new Bitmap(strOldImgUrl); //处理JPG质量的函数 ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders(); ImageCodecInfo ici = null; foreach (ImageCodecInfo codec in codecs) { if (codec.MimeType == "image/jpeg") { ici = codec; break; } } EncoderParameters ep = new EncoderParameters(); ep.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)level); //裁剪图片 Rectangle cloneRect = new Rectangle(intStartX, intStartY, intCutOutWidth, intCutOutHeight); PixelFormat format = bm.PixelFormat; Bitmap cloneBitmap = bm.Clone(cloneRect, format); //保存图片 cloneBitmap.Save(strNewImgUrl, ici, ep); bm.Dispose(); } public bool IsReusable { get { return false; } } }
4、最后奉上Demo