基于asp.net实现图片在线上传并在线裁剪功能

1、说明
接上一篇文章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="Scripts/jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" /><link href="Scripts/uploadify-v3.1/uploadify.css" rel="stylesheet" type="text/css" /><script src="Scripts/jquery.1.9.0.min.js" type="text/javascript"></script><script src="Scripts/jcrop/jquery.Jcrop.js" type="text/javascript"></script><script src="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 id="form1" runat="server"><div><input type="file" id="file_upload" name="file_upload" /></div><div id="cutimg"></div><asp:HiddenField ID="hidXone" runat="server" /><asp:HiddenField ID="hidYone" runat="server" /><asp:HiddenField ID="hidXtwo" runat="server" /><asp:HiddenField ID="hidYtwo" runat="server" /><asp:HiddenField ID="hidImgWidth" runat="server" /><asp:HiddenField ID="hidImgHeight" runat="server" /><asp:HiddenField ID="hidImgUrl" runat="server" /></form></body></html>

Uploadify.ashx（一般处理程序）

<%@ WebHandler Language="C#" Class="UploadifyUpload" %>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 name="context"></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（"/"） + "\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 name="context"></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（"/"）;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 name="intWidth">要缩小裁剪图片宽度</param>/// <param name="intHeight">要缩小裁剪图片长度</param>/// <param name="strOldImgUrl">要处理图片路径</param>/// <param name="strNewImgUrl">处理完毕图片路径</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
ImgJcrop
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持脚本之家！