前台：
<head>
<meta name="viewport" content="width=device-width" />
<title>img3</title>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<link href="~/Scripts/MyJsLibrary/css/imgareaselect-default.css" rel="stylesheet" />
<script src="~/Scripts/MyJsLibrary/jquery.imgareaselect.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$(‘img#imgselect‘).imgAreaSelect({
selectionColor:‘blue‘,
x1:20,y1:10,x2:120,y2:110,
maxWidth:100,maxHeitht:100,
minWidth:100,minHeight:100,
selectionOpacity:0.1,
handles: true,
aspectRatio:‘1:1‘,
onSelectEnd: preview
});
$(‘#button1‘).click(function () {
if (checkImgType($(‘#imgFile‘)[0])) {
$(this).parent().submit();
}
});
$(‘#button2‘).click(function () {
alert($(this).parent().submit());
});
})
function getValue(selection) {
$(‘input[name=x1]‘).val(selection.x1);
$(‘input[name=y1]‘).val(selection.y1);
$(‘input[name=width]‘).val(Math.round(100 / (selection.width || 1) * 300));
$(‘input[name=height]‘).val(Math.round(100 / (selection.height || 1) * 300));
}
function preview(img, selection) {
if (selection.width > 49) {
//getValue(selection);
var defultWidth = $("img#imgselect").width();
var defultHeight = $("img#imgselect").height();
console.info("width:" + defultWidth + "Height:" + defultHeight);
var scaleX = 200 / (selection.width || 1);
var scaleY = 200 / (selection.height || 1);//200px的框
var scaleX1 = 100 / (selection.width || 1);
var scaleY1 = 100 / (selection.height || 1);//100px的框
//获取上传图片的默认width,Height
$(‘#preview200‘).css({
width: Math.round(scaleX * defultWidth) + ‘px‘,//先把图片缩小想要的框的大小，比如200的大小
height: Math.round(scaleY * defultHeight) + ‘px‘,//然后在把图片放大图片的大小。
marginLeft: ‘-‘ + Math.round(scaleX * selection.x1) + ‘px‘,
marginTop: ‘-‘ + Math.round(scaleY * selection.y1) + ‘px‘
});
$(‘#preview100‘).css({
width: Math.round(scaleX1 * defultWidth) + ‘px‘,
height: Math.round(scaleY1 * defultHeight) + ‘px‘,
marginLeft: ‘-‘ + Math.round(scaleX1 * selection.x1) + ‘px‘,
marginTop: ‘-‘ + Math.round(scaleY1 * selection.y1) + ‘px‘
});
$("#x1").val(Math.round(selection.x1));
$("#x2").val(Math.round(selection.x2-selection.x1));//截取得宽度
$("#y1").val(Math.round(selection.y1));
$("#y2").val(Math.round(selection.y2 - selection.y1));//截取得高度
}
}
/**检查图片上传类型*/
function checkImgType(obj){
var imgFile = ‘‘;
//获取图片的全路径
var imgFilePath = getImgFullPath(obj);
var endIndex = imgFilePath.lastIndexOf(‘\\‘);
var lastIndex = imgFilePath.length-endIndex-1;
if (endIndex != -1)
imgFile= imgFilePath.substr(endIndex+1,lastIndex);
else
imgFile = imgFilePath;
var tag = true;
endIndex = imgFilePath.lastIndexOf(‘.‘);
if (endIndex == -1)
tag = false;
var ImgName = imgFilePath.substr(endIndex+1,lastIndex);
ImgName = ImgName.toUpperCase();
if (ImgName !=‘GIF‘ && ImgName !=‘JPG‘ && ImgName !=‘PNG‘ && ImgName !=‘BMP‘){
tag=false;
}
if (!tag) {
alert(‘上传图片的文件类型必须为: *.gif,*.jpg,*.png,*.bmp,请重新选择!‘)
alert(‘你逗我么‘);
// Upload.clear(obj);
return false;
}
return true;
}
function getImgFullPath(obj) {
if (obj) {
//ie
if (window.navigator.userAgent.indexOf(‘MSIE‘) >= 1) {
obj.select();
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf(‘Firefox‘) >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
});
</script>
<style type=‘text/css‘>
#container
{
position: absolute;
left: 40px;
background: #FFF;
border: #666 2px solid;
border-radius: 10px;
width: 600px;
height: 500px;
padding: 20px;
}
#selectdiv
{
width: 350px;
height: 550px;
float: left;
}
#uploaddiv
{
margin-top: 20px;
border-top: #CCC 1px solid;
}
#prediv200
{
height: 200px;
width: 200px;
overflow: hidden;
border: #CCC 3px dashed;
}
#prediv100
{
height: 100px;
width: 100px;
overflow: hidden;
border: #CCC 3px dashed;
}
#preview
{
position: relative;
overflow: hidden;
}
[type=button]
{
width: 50px;
}
</style>
</head>
<body>
<div>
<div id=‘container‘>
<div id=‘selectdiv‘>
<img id=‘imgselect‘ src=‘~/Content/UploadImg/fdsfsdfsdfsd.jpg‘/>
<div>
<p>图片上传:<font color=‘red‘>*.gif,*.jpg,*.png,*.bmp</font></p>
@using (Html.BeginForm("img3Handler", "UpLoadImg", FormMethod.Post, new { Area="TestFunction"}))
{
<input type=‘file‘ name=‘imgFile‘ id=‘imgFile‘><br />
<br />
<input type=‘text‘ name=‘x1‘ id="x1" value=‘0‘ />
<input type=‘text‘ name=‘y1‘ id="y1" value=‘0‘ />
<input type=‘text‘ name=‘x2‘ id="x2" value=‘0‘ />
<input type=‘text‘ name=‘y2‘ id="y2" value=‘0‘ /><br />
<input type="text" name="src" id="src" value="~/Content/UploadImg/fdsfsdfsdfsd.jpg" />
<input type="submit" value=‘上传‘ id=‘upload‘ />
}
</div>
</div>
<div id=‘prediv200‘>
<img id=‘preview200‘ src=‘~/Content/UploadImg/fdsfsdfsdfsd.jpg‘ width=‘200px‘ height=‘200px‘ />
</div>
<div id=‘prediv100‘>
<img id=‘preview100‘ src=‘~/Content/UploadImg/fdsfsdfsdfsd.jpg‘ width=‘100px‘ height=‘100px‘ />
</div>
<div>
<form>
@* <input type=‘hidden‘ name=‘x1‘ value=‘0‘ />
<input type=‘hidden‘ name=‘y1‘ value=‘0‘ />
<input type=‘hidden‘ name=‘width‘ value=‘100‘ />
<input type=‘hidden‘ name=‘height‘ value=‘100‘ />
<br />
<br />*@
<input type=‘button‘ value=‘修改‘ id=‘button2‘ />
</form>
</div>
@if (ViewData["success"] != null)
{
<script type="text/javascript">
$(function () {
$(".success").slideDown();
$("#ok").slideUp();
});
</script>
<div style="display: none;position:absolute;top:200px;left:200px;z-index:1000;" class="success">
上传成功
<input type="button" id="ok" value="确定" />
</div>
}
else
{
<span>上传失败</span>
}
</div>
</div>
</body>
</html>
后台：
public ActionResult img3Handler(FormCollection forms)
{
int x1 = Convert.ToInt32(forms["x1"]);
int y1 = Convert.ToInt32(forms["y1"]);
int x2 = Convert.ToInt32(forms["x2"]);//实际上是没有用的
int y2 = Convert.ToInt32(forms["y2"]);//实际上是没有用得
string src = forms["src"];
string Path = HttpContext.Server.MapPath(src);//实际路径
//创建图象，保存将来截取的图象
//Bitmap image = new Bitmap(Path);
//Graphics imgGraphics = Graphics.FromImage(image);
//设置截屏区域
//imgGraphics.CopyFromScreen(x1, y1, x2, y2, new Size(100, 100));
//保存
//SaveImage(image);
string[] fileName = src.Split(‘.‘);
//string file = fileName[0]+fileName[1] + "caijinhao." + fileName[2];
string folders = HttpContext.Server.MapPath("~/Content/UploadImg/");
//image.Save(folders+"caijinhao3."+fileName[1]);
string newpath= CutImage(Path, x1, y1, x2, y2, Guid.NewGuid().ToString("N"), folders,fileName[1]);
ViewData["success"] = "true";
return View("img3");
}
/// <summary>
/// 截取图片方法
/// </summary>
/// <param name="url">图片地址</param>
/// <param name="beginX">开始位置-X</param>
/// <param name="beginY">开始位置-Y</param>
/// <param name="getX">截取宽度</param>
/// <param name="getY">截取长度</param>
/// <param name="fileName">文件名称</param>
/// <param name="savePath">保存路径</param>
/// <param name="fileExt">后缀名</param>
public string CutImage(string url, int beginX, int beginY, int getX, int getY, string fileName, string savePath, string fileExt)
{
//if ((beginX < getX) && (beginY < getY))
//{
Bitmap bitmap = new Bitmap(url);//原图
//if (((beginX + getX) <= bitmap.Width) && ((beginY + getY) <= bitmap.Height))
//{
// Bitmap destBitmap = new Bitmap(getX, getY);//目标图 创建新图大小
Bitmap destBitmap = new Bitmap(100, 100);//要存储的图像的大小
Rectangle destRect = new Rectangle(0, 0, getX, getY);//我要在新图的开始画图的位置
Rectangle srcRect = new Rectangle(beginX, beginY, getX, getY);//我要在原图的这个位置复制
Graphics imgGraphics = Graphics.FromImage(destBitmap);
imgGraphics.DrawImage(bitmap, destRect, srcRect, GraphicsUnit.Pixel);
ImageFormat format = ImageFormat.Png;
switch (fileExt.ToLower())
{
case "png": format = ImageFormat.Png; break;
case "bmp": format = ImageFormat.Bmp; break;
case "gif": format = ImageFormat.Gif; break;
}
destBitmap.Save(savePath + "//" + fileName+"."+fileExt,format);
return savePath + "\\" + "*" + fileName.Split(‘.‘)[0] + "." + fileExt;
//}
//else
//{ return "截取范围超出图片范围"; }
//}
//else
//{ return "请确认(beginX < getX)&&(beginY < getY)"; }
}