Asp.net MVC 实现图片上传剪切
使用技术：Asp.net MVC与jquery.uploadify,Jcrop
首先上页面
01 |
<strong><!DOCTYPE html> |
02 |
<html> |
03 |
<head> |
04 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
05 |
<title>Index</title> |
06 |
<link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css"/> |
07 |
<script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js"type="text/javascript"></script> |
08 |
<script src="http://www.cnblogs.com/Js/uploadify/swfobject.js"type="text/javascript"></script> |
09 |
<script src="http://www.cnblogs.com/Js/uploadify/jquery.uploadify.v2.1.4.min.js"type="text/javascript"></script> |
10 |
<link href="http://www.cnblogs.com/Js/uploadify/uploadify.css" rel="stylesheet"type="text/css" /> |
11 |
<script src="http://www.cnblogs.com/Js/crop/jquery.Jcrop.min.js"type="text/javascript"></script> |
12 |
<link href="http://www.cnblogs.com/Js/crop/jquery.Jcrop.css" rel="stylesheet"type="text/css" /> |
13 |
<style type="text/css"> |
14 |
/* 上传按钮 */ |
15 |
#uploadifyUploader |
16 |
{ |
17 |
margin-top: 235px; |
18 |
} |
19 |
/* 加载条 */ |
20 |
.uploadifyQueueItem |
21 |
{ |
22 |
margin: 0 auto; |
23 |
} |
24 |
#img-up |
25 |
{ |
26 |
width: 700px; |
27 |
height: 500px; |
28 |
background-color: #e8f0f6; |
29 |
text-align: center; |
30 |
} |
31 |
#img-prev-container |
32 |
{ |
33 |
width: 200px; |
34 |
height: 200px; |
35 |
overflow: hidden; |
36 |
clear: both; |
37 |
} |
38 |
#img-crop |
39 |
{ |
40 |
display: none; |
41 |
} |
42 |
</style> |
43 |
</head> |
44 |
<body> |
45 |
<div id="img-up"> |
46 |
<input type="file" id="uploadify" name="uploadify" /> |
47 |
<div id="fileQueue"> |
48 |
</div> |
49 |
</div> |
50 |
<div id="img-crop"> |
51 |
<div id="img-prev-container"> |
52 |
<img id="img-preview" /> |
53 |
</div> |
54 |
<img id="img-uploadify" /> |
55 |
<form action="/Crop/tryCrop" method="post"> |
56 |
<input type="hidden" name="x" id="x" /> |
57 |
<input type="hidden" name="y" id="y" /> |
58 |
<input type="hidden" name="w" id="w" /> |
59 |
<input type="hidden" name="h" id="h" /> |
60 |
<input type="hidden" name="img" id="img" /> |
61 |
<input type="submit" value="剪裁" /> |
62 |
</form> |
63 |
</div> |
64 |
</body> |
65 |
</html></strong> |
JS
01 |
<script type="text/javascript"> |
02 |
$(function () { |
03 |
var jcrop_api, boundx, boundy; |
04 |
|
05 |
function updateCoords(c) { |
06 |
$('#x').val(c.x); |
07 |
$('#y').val(c.y); |
08 |
$('#w').val(c.w); |
09 |
$('#h').val(c.h); |
10 |
}; |
11 |
function updatePreview(c) { |
12 |
if (parseInt(c.w) > 0) { |
13 |
/* 商必须与img-preview宽高一致 */ |
14 |
var rx = 200 / c.w; |
15 |
var ry = 200 / c.h; |
16 |
|
17 |
$('#img-preview').css({ |
18 |
width: Math.round(rx * boundx) + 'px', |
19 |
height: Math.round(ry * boundy) + 'px', |
20 |
marginLeft: '-' + Math.round(rx * c.x) + 'px', |
21 |
marginTop: '-' + Math.round(ry * c.y) + 'px' |
22 |
}); |
23 |
} |
24 |
}; |
25 |
|
26 |
$("#uploadify").uploadify({ |
27 |
'uploader': 'http://www.cnblogs.com/Js/uploadify/uploadify.swf', |
28 |
'script': '/Crop/upload', |
29 |
'cancelImg': 'http://www.cnblogs.com/Js/uploadify/cancel.png', |
30 |
'folder': 'Images', |
31 |
'queueID': 'fileQueue', |
32 |
'auto': true, |
33 |
'buttonText': 'upload image', |
34 |
'queueSizeLimit': 1, |
35 |
'multi': false, |
36 |
'fileDesc': 'jpg,gif', |
37 |
'fileExt': '*.jpg;*.gif', |
38 |
'sizeLimit': '819200', |
39 |
'onComplete': function (event, queueID, fileObj, response, data) { |
40 |
var result = eval('(' + response + ')'); |
41 |
if ('0' == result.id) { |
42 |
$('#img-up').remove(); |
43 |
$('#img-crop').css("display", "block"); |
44 |
/* 绑定图片名称 */ |
45 |
variname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length); |
46 |
$('#img').val(iname); |
47 |
/* 加载原始图片 */ |
48 |
$('#img-preview,#img-uploadify').attr("src", result.mess); |
49 |
/* 加载剪裁插件 */ |
50 |
$('#img-uploadify').Jcrop({ |
51 |
onChange: updatePreview, |
52 |
onSelect: updatePreview, |
53 |
aspectRatio: 1, |
54 |
onSelect: updateCoords, |
55 |
setSelect: [0, 0, 200, 200] |
56 |
}, function () { |
57 |
var bounds = this.getBounds(); |
58 |
boundx = bounds[0]; |
59 |
boundy = bounds[1]; |
60 |
jcrop_api = this; |
61 |
}); |
62 |
} else if ('1' == result.id) { |
63 |
/* 异常信息提示 */ |
64 |
alert(result.mess) |
65 |
} |
66 |
} |
67 |
}); |
68 |
}); |
69 |
</script> |
01 |
public class CropController : Controller |
02 |
{ |
03 |
public ActionResult Index() |
04 |
{ |
05 |
return View(); |
06 |
} |
07 |
|
08 |
[HttpPost] |
09 |
public ActionResult upload(HttpPostedFileBase Filedata) |
10 |
{ |
11 |
try |
12 |
{ |
13 |
Image image = Image.FromStream(Filedata.InputStream); |
14 |
stringipath = Path.Combine("Images", Path.GetFileName(Filedata.FileName)); |
15 |
string spath = Path.Combine(HttpContext.Server.MapPath("~"), ipath); |
16 |
image.Save(spath); |
17 |
|
18 |
return Json(new{ id = "0", mess = string.Format("{0}{1}/{2}", BaseUrl, "Images", Filedata.FileName), iw = image.Width, ih = image.Height }); |
19 |
} |
20 |
catch (Exception ex) |
21 |
{ |
22 |
return Json(new { id = "1", mess = ex.Message }); |
23 |
} |
24 |
} |
25 |
|
26 |
public void tryCrop(string img, int x, int y, int w, int h) |
27 |
{ |
28 |
Image image = Image.FromFile(Path.Combine(HttpContext.Server.MapPath("~"), "Images", img)); |
29 |
Crop(image, w, h, x, y).Save(Path.Combine(HttpContext.Server.MapPath("~"), "Images", "v"+ img)); |
30 |
|
31 |
Response.Redirect(string.Format("{0}{1}/{2}", BaseUrl, "Images", "v"+ img)); |
32 |
} |
33 |
|
34 |
[NonAction] |
35 |
public string BaseUrl |
36 |
{ |
37 |
get |
38 |
{ |
39 |
return Request.Url.Scheme + "://"+ Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + '/'; |
40 |
} |
41 |
} |
42 |
|
43 |
[NonAction] |
44 |
public static Image Crop(Image image, int width, int height, int x, int y) |
45 |
{ |
46 |
Bitmap bmp = new Bitmap(width, height, PixelFormat.Format24bppRgb); |
47 |
bmp.SetResolution(image.HorizontalResolution, image.VerticalResolution); |
48 |
|
49 |
using (Graphics graphic = Graphics.FromImage(bmp)) |
50 |
{ |
51 |
graphic.SmoothingMode = SmoothingMode.AntiAlias; |
52 |
graphic.InterpolationMode = InterpolationMode.HighQualityBicubic; |
53 |
graphic.PixelOffsetMode = PixelOffsetMode.HighQuality; |
54 |
graphic.DrawImage(image, newRectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel); |
55 |
} |
56 |
|
57 |
return bmp; |
58 |
} |
59 |
} |
转自：http://www.cnblogs.com/yoer/archive/2012/02/18/asp_net_mvc_image_upload_crop.html
