使用技术: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 |
700px; |
27 |
height: 500px; |
28 |
background-color: #e8f0f6; |
29 |
text-align: center; |
30 |
} |
31 |
#img-prev-container |
32 |
{ |
33 |
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 |
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 |
var iname = (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 |
string ipath = 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, new Rectangle(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