ASP.NET C# MVC +Jquery 实现图片上传、剪辑、缩略、水印
前段时间,写了个专门用来缩略和水印图片的! 后来在实际运用中,发现了好多不足地方,后来对进行了一些优化.
今天整理了一下,算是笔记吧!
这里呢！简单演示一下，从上传、剪辑、缩略、水印的整个流程,希望大家多多指出缺点:
这里我是C#MVC3.0进行演示的:
上传
View Code
页面端:
@using (Html.BeginForm("uploadfile", "template", FormMethod.Post, new { id = "submitform", enctype = "multipart/form-data" }))
{
<input type="file" name="pic"/>
<input type="button" value="提交" onclick="submitformkkk();"/>
}
<script src="/scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
function submitformkkk() {
$("#submitform").ajaxSubmit({
success: function (responseText) {
$("#photo").attr("src", responseText);
}
});
}
</script>
控制器Action：
public ActionResult Uploadfile()
{
//上传文件
HttpPostedFileBase hp = Request.Files["pic"];
string waring = ""; //上传警告信息
string savepath = ImageDealLib.uploadbystream(hp.InputStream, "/images/", out waring);
return Content(savepath);----返回给页面剪辑图片使用
}
剪辑图片
View Code
页面端:
<link href="/scripts/jquery.imgareaselect-0.9.8/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script src="/scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/scripts/jquery.imgareaselect-0.9.8/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>
<img src="" id="photo" alt="" style=" cursor:move"/> ---->上传成功后,原图展示
<img src="" id="photo2" alt=""/> ----->剪辑成功后,效果展示
<script type="text/javascript">
$(document).ready(function () {
$('#photo').imgAreaSelect({
fadeSpeed: 500,
autoHide: false,
handles: true,
persistent: false,
onSelectEnd: function (img, selection) {
var x1, y1, xwidth, yheight, spath;
x1 = selection.x1;
y1 = selection.y1;
xwidth = selection.width;
yheight = selection.height;
picpath = $("#photo").attr("src");
$.post("/template/crop", { x1: x1, y1: y1, width: xwidth, height: yheight, picpath: picpath }, function (url) {
$("#photo2").attr("src", url + "?" + Math.random());
})
}
});
});
</script>
控制器Action:
[HttpPost]
public ActionResult Crop(FormCollection collection)
{
int x1=int.Parse(collection["x1"]);
int y1 = int.Parse(collection["y1"]);
int width = int.Parse(collection["width"]);
int height = int.Parse(collection["height"]);
string picpath = collection["picpath"];
string warning = ""; //剪辑警告信息
string d = ImageDealLib.imgcrop(picpath, "/images/", x1, y1, width, height, ImageDealLib.FileCache.Save, out warning);
return Content(d);
}
为了满足网站不同尺寸图片展示需要,提供图片缩略和水印,假设，经上面2步处理后的图片保存地址已确定，这里假定为
string savepath
下面进行缩略、水印:
View Code
string warning="";
string suoluepic= ImageDealLib.Resizepic(savepath, ImageDealLib.ResizeType.XY, "/images/", ImageDealLib.ImageType.JPEG, 1280, 800, ImageDealLib.FileCache.Save, out warning);
string waterpic = ImageDealLib.makewatermark(suoluepic, "/images/w.png", I
补充：Web开发 , ASP.Net ,
