使用技术：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