MVC图片上传、剪辑、缩略、水印
前段时间,写了个专门用来缩略和水印图片的! 后来在实际运用中,发现了好多不足地方,后来对进行了一些优化.
今天整理了一下,算是笔记吧!
这里呢!简单演示一下,从上传、剪辑、缩略、水印的整个流程,希望大家多多指出缺点:
这里我是C#MVC3.0进行演示的:
上传
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
页面端:
@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);----返回给页面剪辑图片使用
}
剪辑图片
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
页面端:
<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
下面进行缩略、水印:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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", ImageDealLib.WaterType.Random, "/images/", ImageDealLib.ImageType.JPEG, ImageDealLib.FileCache.Save, out warning2);
OK,完成! 下面附上核心处理源码:
commonfun.cs 公用函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.IO;
namespace ImgClassLib
{
/// <summary>
/// 公用函数
/// </summary>
public partial class ImageDealLib
{
/// <summary>
/// 根据文件路径判断文件是否存在
/// </summary>
/// <param name="filepath">文件路径</param>
/// <param name="model">返回模式,m:返回map地址不检查文件是否存在,c:检测文件是否存在,并返回map地址</param>
/// <param name="mappath">map路径</param>
/// <returns></returns>
public static bool FileExistMapPath(string filepath, FileCheckModel model, out string mappath)
{
bool checkresult = false;
switch (model)
{
case FileCheckModel.M:
mappath = HttpContext.Current.Server.MapPath(filepath);
checkresult = true;
break;
case FileCheckModel.C:
if (File.Exists(System.Web.HttpContext.Current.Server.MapPath(filepath)))
{
mappath = HttpContext.Current.Server.MapPath(filepath);
checkresult = true;
}
else
{
mappath = null;
checkresult = false;
}
break;
default:
mappath = "";
checkresult = false;
break;
}
return checkresult;
}
/// <summary>
/// 图片保存类型
/// JPEG:.jpg格式;
/// GIF:.gif格式;
/// PNG:.png格式;
/// </summary>
public enum ImageType
{
JPEG,
GIF,
PNG
}
/// <summary>
/// 水印模式
/// Center:中间;
/// CenterUp:中上;
/// CenterDown:中下;
/// LeftUp:左上;
/// LeftDown:左下;
/// RightUp:右上;
/// RightDown:右下;
/// Random:随机;
/// </summary>
public enum WaterType
{
Center,
CenterUp,
CenterDown,
LeftUp,
LeftDown,
RightUp,
RightDown,
Random
}
/// <summary>
/// 缩略模式
/// X--按宽度缩放,高着宽比例;
/// Y--按高度缩放,宽着宽比例;
/// XY--按给定mwidth,mheight(此模式mwidth,mheight为必须值)进行缩略;
/// </summary>
public enum ResizeType
{
X,
Y,
XY
}
/// <summary>
/// 文件检测模式
/// M:不检测文件是否存在,返回ServerMapPath;
/// C:检测文件是否存在,返回ServerMapPath;
/// </summary>
public enum FileCheckModel
{
M,
C
}
/// <summary>
/// 原图文件是否保存
/// Delete:保存
/// Save:不保存,删除
/// </summary>
public enum FileCache
{
Save,
Delete
}
}
}
imgcrop.cs 图片剪辑
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
namespace ImgClassLib
{
public partial class ImageDealLib
{
public static string lastcroppic = "";//上一张已剪切生成的文件名
public static string diffpicpath = "";//上一张要被剪切的原图地址
/// <summary>
/// 图片剪切
/// </summary>
/// <param name="picpath">源图片文件地址</param>
/// <param name="spath">剪切临时文件地址</param>
/// <param name="x1">x起始坐标</param>
/// <param name="y1">y起始坐标</param>
/// <param name="width">宽度</param>
/// <param name="height">高度</param>
/// <param name="filecache">源文件处理方式</param>
/// <param name="warning">处理警告信息</param>
/// <returns>剪切图片地址</returns>
public static string imgcrop(string picpath, string spath, int x1, int y1, int width, int height, FileCache filecache,out string warning)
{
//反馈信息
System.Text.StringBuilder checkmessage = new System.Text.StringBuilder();
//从指定源图片,创建image对象
string _sourceimg_common_mappath = "";
//检测源文件
bool checkfile = false;
checkfile = FileExistMapPath(picpath, FileCheckModel.C, out _sourceimg_common_mappath);
System.Drawing.Image _sourceimg_common = null;
System.Drawing.Bitmap _currimg_common = null;
System.Drawing.Graphics _g_common = null;
if (checkfile == true)
{
//从源文件创建imgage
_sourceimg_common = System.Drawing.Image.FromFile(_sourceimg_common_mappath);
//从指定width、height创建bitmap对象
_currimg_common = new System.Drawing.Bitmap(width, height);
//从_currimg_common创建画笔
_g_common = Graphics.FromImage(_currimg_common);
//设置画笔
_g_common.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
_g_common.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
_g_common.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half;
//绘制图片
_g_common.DrawImage(_sourceimg_common, new Rectangle(0, 0, width, height), new Rectangle(x1, y1, width, height), GraphicsUnit.Pixel);
//保存图片
string _spath_common_mappath = "";
//判断是否是对同一张图片进行剪切
//判断是否,已更新剪切图片,防止覆盖上一张已完成剪切的图片
spath = string.IsNullOrEmpty(lastcroppic) ? spath + Guid.NewGuid().ToString() + ".jpg" : (diffpicpath == picpath ? lastcroppic : spath + Guid.NewGuid().ToString() + ".jpg");
lastcroppic = spath;
diffpicpath = picpath;
FileExistMapPath(spath, FileCheckModel.M, out _spath_common_mappath);
_currimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Jpeg);
//释放
_sourceimg_common.Dispose();
_currimg_common.Dispose();
_g_common.Dispose();
//处理原文件
int filecachecode = filecache.GetHashCode();
//文件缓存方式:Delete,删除原文件
if (filecachecode == 1)
{
System.IO.File.Delete(_sourceimg_common_mappath);
}
//返回相对虚拟路径
warning = "";
return spath;
}
checkmessage.Append("error:未能找到剪切原图片;");
warning = checkmessage.ToString().TrimEnd(';');
return "";
}
}
}
skeletonize.cs 图片缩略
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Drawing;
using System.IO;
namespace ImgClassLib
{
/// <summary>
/// 图片处理:缩略图片
/// </summary>
public partial class ImageDealLib
{
/// <summary>
/// 根据指定:缩略宽、高,缩略图片并保存
/// 返回图片虚拟路径,和一个警告信息,可根据此信息获取图片合成信息
/// </summary>
/// <param name="picpath">原图路径</param>
/// <param name="model">缩略模式[X,Y,XY](默认XY模式)</param>
/// <param name="spath">文件保存路径(默认跟路径)</param>
/// <param name="imgtype">图片保存类型</param>
/// <param name="mwidth">缩略宽度(默认原图高度)</param>
/// <param name="mheight">缩略高度(默认原图高度)</param>
/// <param name="filecache">原文件处理方式</param>
/// <param name="warning">处理警告信息</param>
/// <returns>错误,返回错误信息;成功,返回图片路径</returns>
public static string Resizepic(string picpath, ResizeType model, string spath, ImageType imgtype, double? mwidth, double? mheight, FileCache filecache, out string warning)
{
//反馈信息
System.Text.StringBuilder checkmessage = new System.Text.StringBuilder();
//文件保存路径
spath = string.IsNullOrEmpty(spath) ? "/" : spath;
//缩略宽度
double swidth = mwidth.HasValue ? double.Parse(mwidth.ToString()) : 0;
//缩略高度
double sheight = mheight.HasValue ? double.Parse(mheight.ToString()) : 0;
//从指定源图片,创建image对象
string _sourceimg_common_mappath = "";
//检测源文件
bool checkfile = false;
checkfile=FileExistMapPath(picpath,FileCheckModel.C, out _sourceimg_common_mappath);
System.Drawing.Image _sourceimg_common=null;
System.Drawing.Bitmap _currimg_common = null;
System.Drawing.Graphics _g_common = null;
if (checkfile == true)
{
//从源文件创建imgage
_sourceimg_common = System.Drawing.Image.FromFile(_sourceimg_common_mappath);
#region 缩略模式
//缩略模式
switch (model)
{
case ResizeType.X:
#region X模式
//根据给定尺寸,获取绘制比例
double _width_scale = swidth / _sourceimg_common.Width;
//高着比例
sheight = _sourceimg_common.Height * _width_scale;
#endregion
; break;
case ResizeType.Y:
#region Y模式
//根据给定尺寸,获取绘制比例
double _height_scale = sheight / _sourceimg_common.Height;
//宽着比例
swidth = _sourceimg_common.Width * _height_scale;
#endregion
; break;
case ResizeType.XY:
#region XY模式
//当选择XY模式时,mwidth,mheight为必须值
if (swidth < 0 || sheight < 0)
{
checkmessage.Append("error:XY模式,mwidth,mheight为必须值;");
}
#endregion
; break;
default:
#region 默认XY模式
//当默认XY模式时,mwidth,mheight为必须值
if (swidth < 0 || sheight < 0)
{
checkmessage.Append("error:你当前未选择缩略模式,系统默认XY模式,mwidth,mheight为必须值;");
}
; break;
#endregion
}
#endregion
}
else
{
checkmessage.Append("error:未能找到缩略原图片," + picpath + ";");
}
if (string.IsNullOrEmpty(checkmessage.ToString()))
{
//创建bitmap对象
_currimg_common = new System.Drawing.Bitmap((int)swidth, (int)sheight);
_g_common = Graphics.FromImage(_currimg_common);
//设置画笔
_g_common.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
_g_common.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
_g_common.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half;
//绘制图片
_g_common.DrawImage(_sourceimg_common, new Rectangle(0, 0, (int)swidth, (int)sheight), new Rectangle(0, 0, _sourceimg_common.Width, _sourceimg_common.Height), GraphicsUnit.Pixel);
//保存图片
string _spath_common_mappath = "";
//获取图片类型的hashcode值,生成图片后缀名
int extro = imgtype.GetHashCode();
string extend = extro == 0 ? ".jpg" : (extro == 1 ? ".gif" : (extro == 2 ? ".png" : ".jpg"));
//全局文件名
spath = spath + Guid.NewGuid().ToString() + extend;
FileExistMapPath(spath,FileCheckModel.M, out _spath_common_mappath);
switch (imgtype)
{
case ImageType.JPEG: _currimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Jpeg); break;
case ImageType.GIF: _currimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Gif); break;
case ImageType.PNG: _currimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Png); break;
}
//释放
_sourceimg_common.Dispose();
_currimg_common.Dispose();
_g_common.Dispose();
//处理原文件
int filecachecode = filecache.GetHashCode();
//文件缓存方式:Delete,删除原文件
if (filecachecode == 1)
{
System.IO.File.Delete(_sourceimg_common_mappath);
}
//返回相对虚拟路径
warning = "";
return spath;
}
//释放
if (_sourceimg_common != null)
{
_sourceimg_common.Dispose();
}
if (_currimg_common!=null)
{
_currimg_common.Dispose();
}
if (_g_common != null)
{
_g_common.Dispose();
}
warning = checkmessage.ToString().TrimEnd(';');
return "";
}
}
}
uploadfile.cs 图片上传
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
namespace ImgClassLib
{
/// <summary>
/// 上传文件
/// </summary>
public partial class ImageDealLib
{
/// <summary>
/// 使用流方式,上传并保存文件
/// </summary>
/// <param name="s">文件流</param>
/// <param name="savepath">保存文件路径</param>
/// <param name="warning">处理警告信息,若为空,则处理成功</param>
/// <returns>返回文件保存完整路径</returns>
public static string uploadbystream(Stream s,string savepath,out string warning)
{
int be = 0;
if (s.Length > 0)
{
MemoryStream ms = new MemoryStream();
while((be=s.ReadByte())!=-1)
{
ms.WriteByte((byte)be);
}
string newpath = savepath+DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";
string lastpath="";
FileExistMapPath(newpath,FileCheckModel.M, out lastpath);
FileStream fs=new FileStream(lastpath,FileMode.Create);
ms.WriteTo(fs);
//释放
ms.Dispose();
fs.Dispose();
warning = "";
return newpath;
}
warning = "error";
return "";
}
}
}
watermark.cs 图片水印
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.IO;
using System.Drawing;
namespace ImgClassLib
{
/// <summary>
/// 图片处理:水印图片
/// </summary>
public partial class ImageDealLib
{
/// <summary>
/// 水印图片
/// 【如果图片需要缩略,请使用skeletonize.Resizepic()方法对图片进行缩略】
/// 返回图片虚拟路径,和一个警告信息,可根据此信息获取图片合成信息
/// </summary>
/// <param name="picpath">需要水印的图片路径</param>
/// <param name="waterspath">水印图片路径</param>
/// <param name="watermodel">水印模式</param>
/// <param name="spath">文件保存路径</param>
/// <param name="imgtype">保存文件类型</param>
/// <param name="filecache">原文件处理方式</param>
/// <param name="warning">处理警告信息</param>
/// <returns>错误,返回错误信息;成功,返回图片路径</returns>
public static string makewatermark(string picpath, string waterspath, WaterType watermodel, string spath, ImageType imgtype,FileCache filecache, out string warning)
{
#region
//反馈信息
System.Text.StringBuilder checkmessage = new System.Text.StringBuilder();
//检测源文件
string _sourceimg_common_mappath = "";
bool checkfile = false;
//检测水印源文件
string _sourceimg_water_mappath = "";
bool checkfilewater = false;
checkfile = FileExistMapPath(picpath,FileCheckModel.C, out _sourceimg_common_mappath);
checkfilewater = FileExistMapPath(waterspath, FileCheckModel.C, out _sourceimg_water_mappath);
System.Drawing.Image _sourceimg_common = null;
System.Drawing.Image _sourceimg_water = null;
if (checkfile == true)
{
//从指定源文件,创建image对象
_sourceimg_common = System.Drawing.Image.FromFile(_sourceimg_common_mappath);
}
else
{
checkmessage.Append("error:找不到需要的水印图片!" + picpath + ";");
}
if (checkfilewater == true)
{
//从指定源文件,创建image对象
_sourceimg_water = System.Drawing.Image.FromFile(_sourceimg_water_mappath);
}
else
{
checkmessage.Append("error:找不到需要水印图片!" + waterspath + ";");
}
#endregion
#region
if (string.IsNullOrEmpty(checkmessage.ToString()))
{
//源图宽、高
int _sourceimg_common_width =_sourceimg_common.Width;
int _sourceimg_common_height = _sourceimg_common.Height;
//水印图片宽、高
int _sourceimg_water_width = _sourceimg_water.Width;
int _sourceimg_water_height =_sourceimg_water.Height;
#region 水印坐标
//水印坐标
int _sourceimg_water_point_x = 0;
int _sourceimg_water_point_y = 0;
switch (watermodel)
{
case WaterType.Center:
_sourceimg_water_point_x = (_sourceimg_common_width - _sourceimg_water_width) / 2;
_sourceimg_water_point_y = (_sourceimg_common_height - _sourceimg_water_height) / 2;
; break;
case WaterType.CenterDown:
_sourceimg_water_point_x = (_sourceimg_common_width - _sourceimg_water_width) / 2;
_sourceimg_water_point_y = _sourceimg_common_height - _sourceimg_water_height;
; break;
case WaterType.CenterUp:
_sourceimg_water_point_x = (_sourceimg_common_width - _sourceimg_water_width) / 2;
_sourceimg_water_point_y = 0;
; break;
case WaterType.LeftDown:
_sourceimg_water_point_x = 0;
_sourceimg_water_point_y = _sourceimg_common_height - _sourceimg_water_height;
; break;
case WaterType.LeftUp:
; break;
case WaterType.Random:
Random r = new Random();
int x_random = r.Next(0, _sourceimg_common_width);
int y_random = r.Next(0, _sourceimg_common_height);
_sourceimg_water_point_x = x_random > (_sourceimg_common_width - _sourceimg_water_width)
? _sourceimg_common_width - _sourceimg_water_width : x_random;
_sourceimg_water_point_y = y_random > (_sourceimg_common_height - _sourceimg_water_height)
? _sourceimg_common_height - _sourceimg_water_height : y_random;
; break;
case WaterType.RightDown:
_sourceimg_water_point_x = _sourceimg_common_width - _sourceimg_water_width;
_sourceimg_water_point_y = _sourceimg_common_height - _sourceimg_water_height;
; break;
case WaterType.RightUp:
_sourceimg_water_point_x = _sourceimg_common_width - _sourceimg_water_width;
_sourceimg_water_point_y = 0;
; break;
}
#endregion
//从源图创建画板
System.Drawing.Graphics _g_common = Graphics.FromImage(_sourceimg_common);
//设置画笔
_g_common.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceOver;
_g_common.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
_g_common.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.Half;
//绘制水印图片
_g_common.DrawImage(_sourceimg_water, new Rectangle(_sourceimg_water_point_x, _sourceimg_water_point_y, _sourceimg_water_width, _sourceimg_water_height), new Rectangle(0, 0, _sourceimg_water_width, _sourceimg_water_height), GraphicsUnit.Pixel);
//保存图片
string _spath_common_mappath = "";
//全局文件名
//获取图片类型的hashcode值,生成图片后缀名
int extro = imgtype.GetHashCode();
string extend = extro == 0 ? ".jpg" : (extro == 1 ? ".gif" : (extro == 2 ? ".png" : ".jpg"));
spath = spath + Guid.NewGuid().ToString() + extend;
FileExistMapPath(spath,FileCheckModel.M, out _spath_common_mappath);
switch (imgtype)
{
case ImageType.JPEG: _sourceimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Jpeg); break;
case ImageType.GIF: _sourceimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Gif); break;
case ImageType.PNG: _sourceimg_common.Save(_spath_common_mappath, System.Drawing.Imaging.ImageFormat.Png); break;
}
//释放
_sourceimg_common.Dispose();
_sourceimg_water.Dispose();
_g_common.Dispose();
//处理原文件
int filecachecode = filecache.GetHashCode();
//删除原文件
if (filecachecode == 1)
{
System.IO.File.Delete(_sourceimg_common_mappath);
}
warning = "";
return spath;
}
#endregion
//释放
if (_sourceimg_common != null)
{
_sourceimg_common.Dispose();
}
if (_sourceimg_water!=null)
{
_sourceimg_water.Dispose();
}
warning = checkmessage.ToString().TrimEnd(';');
return "";
}
}
}
希望大家多多指正!
「有些朋友在实际使用中,遇到一些问题,特整理了一下项目工程,并简单写了一个demo里面采用的模式是简单处理的,如果想尽可能减小WEB空间的占用
可将页面的剪辑预览改为div+css控制坐标及范围显示,然后采用缩略、水印一键处理的方式,这样只会保存一张图片
「源码云盘自助提取,2021.7.20补充」
链接:https://pan.baidu.com/s/1fKA6GWAkH4WAvdQ88lQ9UA
提取码:D1w7
【转载引用一下本文地址吧,虽然不是啥很档次的东西,相互尊重劳动成果,你说是吧】
工程操作界面及效果预览:
【2014年初不忙,回头看看自己曾经写的代码,表示很多地方需要优化,以前只能适用于WEB,目前已经优化第一次了在处理部分可以CS适用】