imgareaselect图片裁剪、js裁剪案例
imgareaselect官网：http://odyniec.net/projects/imgareaselect/
进行下载、以及查看官网案例、文档。
首页页面要引用js以及css：
<link href="/Scripts/imgareaselect/css/imgareaselect-default.css" rel="stylesheet"
type="text/css" />
<script src="/Scripts/imgareaselect/scripts/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/imgareaselect/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
代码：
<link href="/Scripts/imgareaselect/css/imgareaselect-default.css" rel="stylesheet"
type="text/css" />
<script src="/Scripts/imgareaselect/scripts/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/imgareaselect/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
<script type="text/javascript">
var x1 = 20;
var y1 = 20;
var x2 = 40;
var y2 = 40;
var w = 60;
var h = 60;
$(document).ready(function () {
$('#photo').imgAreaSelect({
maxWidth: 148,
maxHeight: 148,
handles: true,
x1: 20,
y1: 20,
x2: 80,
y2: 80,
aspectRatio: '1:1',
onSelectChange: preview
});
$('#lbSubmit').bind('click', function () {
if (w == 0|| h== 0) {
alert("请选择图片区域!");
return;
}
$.ajax({
url: 'ImageHandle.ashx',
data: { x1: x1, y1: y1,x2: x2, y2: y2, w: w, h: h, path: "图片地址" },
dataType: 'json',
type: 'POST',
success: function (data) {
if (data.Success) {
window.location.href = window.location.href;
}
else {
alert(data.Msg);
}
}
});
});
});
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
x1=selection.x1;
y1=selection.y1;
x2=selection.x2;
y2=selection.y2;
w=selection.width;
h=selection.height;
}
</script>
<form id="fm_edit_user" runat="server" enctype="multipart/form-data">
<div class="content-header">
<h3>
头像设置</h3>
</div>
<div class="content-body">
<table class="box-form-b" width="100%" align="center">
<tr>
<td align="right" style="width: 130px;">
头像：
</td>
<td>
<img src="/View/User/PictureHelper.ashx" alt="头像" width="148" height="148" />
</td>
</tr>
<tr>
<td align="right" style="width: 130px;">
设置新头像：
</td>
<td>
<img src="/View/User/PictureHelper.ashx?path=<%=ViewState["path"] %>" id="photo" /><div>注：如果没有出现剪裁框，则将鼠标放在需要剪裁的图片上，点击鼠标左键进行选中剪裁。</div>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<a class="y-btn y-btn-blue" id="lbSubmit" href="javascript:void(0)" ><i class="icon icon-ok-white"></i>提交</a>
</td>
</tr>
</table>
</div>
</form>
ImageHandle.ashx后台代码：
/// <summary>
/// ImageHandle 的摘要说明
/// </summary>
public class ImageHandle : HttpHandler
{
public override void ProcessRequest(HttpContext context)
{
Message msg = new Message();
context.Response.ContentType = "text/plain";
string name = context.Request["path"].Trim();
string sx1 = context.Request["x1"].Trim();
string sy1 = context.Request["y1"].Trim();
string sx2 = context.Request["x2"].Trim();
string sy2 = context.Request["y2"].Trim();
string width = context.Request["w"].Trim();
string height = context.Request["h"].Trim();
string filePath = System.Web.HttpContext.Current.Server.MapPath("/Images/defaultUser.jpg");
if (System.IO.File.Exists(context.Request.MapPath("~/upload/"+name)))
{
filePath = System.Web.HttpContext.Current.Server.MapPath("~/upload/" + name);
}
User user=new User();//自己获取用户跟人信息
var data = MakeThumbnail(filePath, int.Parse(sx1), int.Parse(sy1), int.Parse(width), int.Parse(height));
user.Photo = data;//返回二进制
if (UpdateUser(user))
{
msg.Success = true;
msg.Msg = "设置头像成功";
msg.Path = name;
};
context.Response.Write(Dwkj.Common.DataTypeExtend.SerializeHelper.JSONSerialize(msg));//序列化json 序列化方法没有放到程序里，自己百度一下。
}
/// <summary>
/// 剪切图片
/// </summary>
/// <param name="path"></param>
/// <param name="sx"></param>
/// <param name="sy"></param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <returns></returns>
public byte[] MakeThumbnail(string path,int sx,int sy, int width, int height)
{
Image originalImage = Image.FromFile(path);
int x = sx;
int y = sy;
int ow = originalImage.Width;
int oh = originalImage.Height;
//新建一个bmp图片
Image bitmap = new Bitmap(width, height);
//新建一个画板
Graphics g = Graphics.FromImage(bitmap);
//设置高质量插值法
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
//设置高质量,低速度呈现平滑程度
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
//清空画布并以透明背景色填充
g.Clear(Color.Transparent);
//在指定位置并且按指定大小绘制原图片的指定部分
g.DrawImage(originalImage, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
try
{
MemoryStream ms = new MemoryStream();
bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
return ms.GetBuffer();//也可以生成到指定目录，具体方法不介绍了
}
catch (System.Exception e)
{
throw e;
}
finally
{
originalImage.Dispose();
bitmap.Dispose();
g.Dispose();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}