使用imgAreaSelect截取图像使用说明
东郭臻
首先引入相应的css 和 js
<link href="content/imgareaselect-default.css" rel="stylesheet" />
<script src="jq/jquery-1.7.1.min.js"></script>
<script src="jq/ajaxfileupload.js"></script>//这里要用到异步上传图片
<script src="jq/imgareaselect.min.js"></script>//这里是imgAreaSelect使用所以要引入此js
使用说明
< img id="img1" src="/pic/banner.jpg" />
3、imgAreaSelect的数据操作
$('#img1').imgAreaSelect({
selectionColor: 'white',//选择区域的颜色
x1: 0,//初始区的左上角的x坐标
y1: 0,//初始区的左上角的y坐标
x2: 200,//初始区的右下角的x坐标
y2: 200,//初始区的右下角的y坐标
selectionOpacity: 0.2//选择区的透明度
});
这样即可在该图片元素中使用裁剪功能了，当选框确定之后我们要保存被选择的图片还得自己写代码来操作。下面是当确定好图片区域后点击一个裁剪按钮后的操作：
4、裁剪确认操作
$('#btnGetPhoto').click(function () {
var pic = $('#img1').attr('src');
var ias = $('#img1').imgAreaSelect({ instance: true });//获取选择器
var selection = ias.getSelection();//获取选择区
$.post(
"PhotoGet.ashx",//使用post方式发送一个异步请求
{
x: selection.x1,//获取选择区的左上角x坐标
y: selection.y1,//获取选择区的左上角y坐标
w: selection.width,//获取选择区的宽度
h: selection.height,//获取选择区的高度
img: pic
},
function (data) {
$('#img2').attr('src', data);
}
);
});
});
5、服务器端处理
在小图中绘制另外一张图，使用g.DrawImage(Image, destRect, srcRect, GraphicsUnit.Pixel)的重载
需要在服务器端接收 x,y,w,h,img 四个参数
例子如下:
前端代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Maticsoft.Web.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="content/imgareaselect-default.css" rel="stylesheet" />
<script src="jq/jquery-1.7.1.min.js"></script>
<script src="jq/ajaxfileupload.js"></script>
<script src="jq/imgareaselect.min.js"></script>
<script type="text/javascript">
$(function () {
LoadImage();
});
function LoadImage() {
$('#btnClick').click(function () {
$.ajaxFileUpload({
url: 'LoadPhoto.ashx',//执行上传处理的文件地址
secureuri: false,//是否加密，一般是false，默认值为false
fileElementId: 'fileName',//<input type="file" id="UpImg1" name="UpImg1"/> 这里的fileElementId 属性值必须和id是一样的并且要求这个控件要有name属性，用于在服务器端接收
data: {//额外传递的数据，使用json，此时必须设置type为post
type: 1
},
type: 'post',//请求方式，如果传递额外数据，必须是post
success: function (data) {//成功的回调函数，内部处理会加上html标签
//因返回的data 是dom对象需转换成jquery对象才能获取到对应的相对路径
$("#img1").attr("src", $(data).text());
$('#img1').imgAreaSelect({
selectionColor: 'white',//选择区域的颜色
x1: 0,//初始区的左上角的x坐标
y1: 0,//初始区的左上角的y坐标
x2: 200,//初始区的右下角的x坐标
y2: 200,//初始区的右下角的y坐标
selectionOpacity: 0.2//选择区的透明度
});
}
});
});
$('#btnSelect').click(function () {
var ias = $('#img1').imgAreaSelect({ instance: true });//获取选择器
var selection = ias.getSelection();//获取选择区
$.post('LoadPhoto.ashx', {
img: $('#img1').attr('src'),//获取图片路径
x1: selection.x1,//获取起点横坐标
y1: selection.y1,//获取起点纵坐标
width: selection.width,//获取选定宽度
height: selection.height,//获取选定高度
type: 2//截取操作
}, function (data) {
$('#img2').attr('src', data);
$('#imgFile').val(data);
})
});
};
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" id="fileName" name="fileName" />
<input type="button" id="btnClick" value="上传文件" />
<input type="button" id="btnSelect" value="截取头像" />
<img src="" id="img1"/>
<img src="" id="img2" />
<input type="text" readonly="readonly" id="imgFile" name="imgFile" />
</div>
</form>
</body>
</html>
后台服务器端代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Drawing;
using System.IO;
using System.Drawing.Imaging;
namespace Maticsoft.Web
{
/// <summary>
/// LoadPhoto 的摘要说明
/// </summary>
public class LoadPhoto : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int type = int.Parse(context.Request["type"]);
if (type==1)
{
HttpPostedFile files = context.Request.Files["fileName"];
string serverPath = "/bookimg/" + files.FileName;
string allServerPath = context.Request.MapPath(serverPath);
files.SaveAs(allServerPath);
context.Response.Write(serverPath);
}
else
{
int x1 = int.Parse(context.Request["x1"]);
int y1 = int.Parse(context.Request["y1"]);
int width = int.Parse(context.Request["width"]);
int height = int.Parse(context.Request["height"]);
string img = context.Request["img"];
//1.jpg->1_1.jpg
string ext = Path.GetExtension(img);
string path1 = img.Substring(0, img.IndexOf(ext)) + "_1" + ext;
string path2 = context.Request.MapPath(path1);
using (Bitmap bitmap2 = new Bitmap(width, height))
{
using (Bitmap bitmap1 = new Bitmap(context.Request.MapPath(img)))
{
Graphics g = Graphics.FromImage(bitmap2);
g.DrawImage(bitmap1, new Rectangle(0, 0, width, height), new Rectangle(x1, y1, width, height), GraphicsUnit.Pixel);
bitmap2.Save(path2, ImageFormat.Jpeg);
}
}
context.Response.Write(path1);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
类似资料：