您的位置：首页 > 编程语言 > ASP

Asp.net MVC 实现图片上传剪切

2012-02-18 20:28 453 查看

嘿嘿，这是本人第一篇博文，请大家多多指教。

使用技术：Asp.net MVC与jquery.uploadify,Jcrop

首先上页面

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Index</title>
<link href="http://www.cnblogs.com/CSS/base.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Js/uploadify/swfobject.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Js/uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
<link href="http://www.cnblogs.com/Js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Js/crop/jquery.Jcrop.min.js" type="text/javascript"></script>
<link href="http://www.cnblogs.com/Js/crop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* 上传按钮 */
#uploadifyUploader
{
margin-top: 235px;
}
/* 加载条 */
.uploadifyQueueItem
{
margin: 0 auto;
}
#img-up
{
width: 700px;
height: 500px;
background-color: #e8f0f6;
text-align: center;
}
#img-prev-container
{
width: 200px;
height: 200px;
overflow: hidden;
clear: both;
}
#img-crop
{
display: none;
}
</style>
</head>
<body>
<div id="img-up">
<input type="file" id="uploadify" name="uploadify" />
<div id="fileQueue">
</div>
</div>
<div id="img-crop">
<div id="img-prev-container">
<img id="img-preview" />
</div>
<img id="img-uploadify" />
<form action="/Crop/tryCrop" method="post">
<input type="hidden" name="x" id="x" />
<input type="hidden" name="y" id="y" />
<input type="hidden" name="w" id="w" />
<input type="hidden" name="h" id="h" />
<input type="hidden" name="img" id="img" />
<input type="submit" value="剪裁" />
</form>
</div>
</body>
</html>

<script type="text/javascript">
$(function () {
var jcrop_api, boundx, boundy;

function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function updatePreview(c) {
if (parseInt(c.w) > 0) {
/* 商必须与img-preview宽高一致 */
var rx = 200 / c.w;
var ry = 200 / c.h;

$('#img-preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};

$("#uploadify").uploadify({
'uploader': 'http://www.cnblogs.com/Js/uploadify/uploadify.swf',
'script': '/Crop/upload',
'cancelImg': 'http://www.cnblogs.com/Js/uploadify/cancel.png',
'folder': 'Images',
'queueID': 'fileQueue',
'auto': true,
'buttonText': 'upload image',
'queueSizeLimit': 1,
'multi': false,
'fileDesc': 'jpg,gif',
'fileExt': '*.jpg;*.gif',
'sizeLimit': '819200',
'onComplete': function (event, queueID, fileObj, response, data) {
var result = eval('(' + response + ')');
if ('0' == result.id) {
$('#img-up').remove();
$('#img-crop').css("display", "block");
/* 绑定图片名称 */
var iname = (result.mess).substring((result.mess).lastIndexOf("/") + 1, (result.mess).length);
$('#img').val(iname);
/* 加载原始图片 */
$('#img-preview,#img-uploadify').attr("src", result.mess);
/* 加载剪裁插件 */
$('#img-uploadify').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
onSelect: updateCoords,
setSelect: [0, 0, 200, 200]
}, function () {
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
} else if ('1' == result.id) {
/* 异常信息提示 */
alert(result.mess)
}
}
});
});
</script>

Controller

public class CropController : Controller
{
public ActionResult Index()
{
return View();
}

[HttpPost]
public ActionResult upload(HttpPostedFileBase Filedata)
{
try
{
Image image = Image.FromStream(Filedata.InputStream);
string ipath = Path.Combine("Images", Path.GetFileName(Filedata.FileName));
string spath = Path.Combine(HttpContext.Server.MapPath("~"), ipath);
image.Save(spath);

return Json(new { id = "0", mess = string.Format("{0}{1}/{2}", BaseUrl, "Images", Filedata.FileName), iw = image.Width, ih = image.Height });
}
catch (Exception ex)
{
return Json(new { id = "1", mess = ex.Message });
}
}

public void tryCrop(string img, int x, int y, int w, int h)
{
Image image = Image.FromFile(Path.Combine(HttpContext.Server.MapPath("~"), "Images", img));
Crop(image, w, h, x, y).Save(Path.Combine(HttpContext.Server.MapPath("~"), "Images", "v" + img));

Response.Redirect(string.Format("{0}{1}/{2}", BaseUrl, "Images", "v" + img));
}

[NonAction]
public string BaseUrl
{
get
{
return Request.Url.Scheme + "://" + Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + '/';
}
}

[NonAction]
public static Image Crop(Image image, int width, int height, int x, int y)
{
Bitmap bmp = new Bitmap(width, height, PixelFormat.Format24bppRgb);
bmp.SetResolution(image.HorizontalResolution, image.VerticalResolution);

using (Graphics graphic = Graphics.FromImage(bmp))
{
graphic.SmoothingMode = SmoothingMode.AntiAlias;
graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphic.DrawImage(image, new Rectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);
}

return bmp;
}
}

打完收工......

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航