由于最近一段时间比较忙，发现好久没写博客了，给大家分享下最近搞的logo上传截取功能。在实现这个功能之前找了一些jq的插件，最后选定了cropper在github中可以找到。
具体的思路是1：选择上传的图片，在change事件中用form.jquery.js中的formajax异步提交表单，保存上传的图片
2：绑定cooper事件，对图片进行选取。
3：得到选中区域的坐标，对图片进行截取保存。
其中的难点是ie的兼容性问题，由于本人也不是很好，就不献丑了下面给大家附上代码
页面中的html
<div class="input">
<div><span class="xuanze">选择</span><input type="file" class="file" name="file" id="file" onchange="change()" /><span class="jpeg">支持jpg、jpeg、gif、png、bmp格式的图片</span></div> <div class="xiechneg"> <span class="daxc"> @{ var url = Model.LogoMiddleUrl == null ? "" : Model.LogoMiddleUrl; var path200 = ReadConfig.GetHostUrl("Host") + url; } <img src="@path200" width="118" height="49" alt="" /> </span><i class="dxgou"></i><i class="dxcha"></i><span class="shuzi01">200*80 </span> <span class="xiaoxc"> @{ var url1 = Model.LogoSmallUrl == null ? "" : Model.LogoSmallUrl; var path100 = ReadConfig.GetHostUrl("Host") + url1; } <img src="@path100" width="95" height="38" alt="" /> </span><i class="xiaoxgou"></i><i class="xiaoxcha"></i><span class="shuzi02">100*40 </span> </div> <div class="yzhz"> <div class="xiaoyz"> <div class="img-container"> <img src="/Content/img/xtsz/xiaoyizi.jpg" width="400" height="280" alt="" id="HeadPic" /> </div> <span class="logo">选择本地照片，上传编辑自己的LOGO</span> <span class="qd" onclick="SubmitHead()">确定</span> </div> <div class="ybXC"> <span class="lgyl">LOGO预览</span> <div class="img-preview preview-lg"> </div> <div class="img-preview preview-md"> </div> </div> </div> </div>
cropper下载地址http://jquery-plugins.net/image-cropper-jquery-image-cropping-plugin
form.jquery.js的下载地址 http://malsup.com/jquery/form/#download
页面的js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<script> function change() { var pic = document.getElementById("HeadPic"), file = document.getElementById("file"); var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase(); // gif在IE浏览器暂时无法显示 if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') { alert("图片的格式必须为png或者jpg或者jpeg格式！"); return; } var isIE = navigator.userAgent.match(/MSIE/) != null, isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null; if (isIE) { file.select(); file.blur(); var reallocalpath = document.selection.createRange().text; // IE6浏览器设置img的src为本地路径可以直接显示图片 if (isIE6) { pic.src = reallocalpath; } else { //// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现 //pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='crop',src="" + reallocalpath + "")"; //// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片 //pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; //CutPic(); $("#HeadForm").ajaxSubmit({ type: "POST", url: "/AjaxCommon/UpPic/", dataType: "text", success: function (data) { $("#HeadSrc").val(data); $("#HeadPic").attr("src", "@ReadConfig.GetHostUrl("Host")" + data); CutPic(); } }); } } else { html5Reader(file); } } function html5Reader(file) { var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var pic = document.getElementById("HeadPic"); pic.src = this.result; $("#HeadForm").ajaxSubmit({ type: "POST", url: "/AjaxCommon/UpPic/", dataType: "text", success: function (data) { $("#HeadSrc").val(data); CutPic(); } }); CutPic(); }; } function CutPic() { var $image = $('.img-container>img'); var options = { aspectRatio: 5 / 2, preview: '.img-preview', }; $image.cropper(options); } function SubmitHead() { $.NabianPost({ url: "/Handler/CutImage.ashx", data: { filesrc: $("#HeadPic").attr("src"), top: parseInt($(".cropper-move").offset().top - $(".cropper-canvas").offset().top), left: parseInt($(".cropper-move").offset().left - $(".cropper-canvas").offset().left), height: parseInt($(".cropper-move").css("height")), parseInt($(".cropper-move").css("width")), HeadSrc: $("#HeadSrc").val() }, callback: function (data) { if (data.status == "no") { alert("对不起上传失败"); } else { alert("上传成功"); window.location.reload(); } } }); } </script> |
上传图片的方法
public ActionResult UpPic()
{
var file = Request.Files["file"];
if (file.ContentLength == 0)
{
return Content("请选择文件");
}
if (file.ContentLength > 307200)
{
return Content("文件过大");
}
int width = 0; int height = 0;
string path = ReadEnum.GetFilePath((int)FilePath.GYS_Logo);
string HostUrl = ReadConfig.GetHostUrl("HostUrl");
string finalPaht;
Request.Files.Processing(HostUrl, path, 400, 280, 100, out finalPaht, "GYS_Logo", 11);
string a = path;
return Content(a);
}
截取并保存截取后的图片的handler
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; using System.IO; using System.Linq; using System.Web; using BCommon.common; using BLL.BLL; using Model.Model; namespace www.nabian.com.Handler { /// <summary> /// CutImage 的摘要说明 /// </summary> public class CutImage : IHttpHandler, System.Web.SessionState.IRequiresSessionState { /// <summary> /// 对图像的裁减操作主入口 /// </summary> /// <param name="context">所有HTTP请求的特定信息</param> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/json"; string fileSource = context.Request["filesrc"]; //原文件路径和文件名 //文件保存路径 string HostUrl = ReadConfig.GetHostUrl("HostUrl"); //minilogo的保存路径 string path100 = ReadEnum.GetFilePath((int)FilePath.GYS_inLOGO100_40); string path200 = ReadEnum.GetFilePath((int)FilePath.GYS_inLOGO200_80); int cutY = int.Parse(context.Request["top"]); //Y轴坐标 int cutX = int.Parse(context.Request["left"]); //X轴坐标 int cutWidth = int.Parse(context.Request["width"]); //裁减宽度 int cutHeight = int.Parse(context.Request["height"]); //裁减高度 string HeadSrc = HostUrl + context.Request["HeadSrc"]; //裁减后上传 CutImg(HeadSrc, cutX, cutY, cutWidth, cutHeight, path100, "GYS_inLOGO100_40", context); CutImg(HeadSrc, cutX, cutY, cutWidth, cutHeight, path200, "GYS_inLOGO200_80", context); //如果文件存在，说明文件上传成功 if (File.Exists(HostUrl + path100) && File.Exists(HostUrl + path200)) { var user = (B_Com_User)context.Session["LoginUser"]; var com = new B_Com_CompanyBLL().SelectByID(user.CompanyID.ToString()); com.LogoUrl = HeadSrc; com.LogoMiddleUrl = path200; com.LogoSmallUrl = path100; if (new B_Com_CompanyBLL().UpdateLogoById(com)) { context.Response.Write("{"status":"ok"}"); } else { context.Response.Write("{"status":"no"}"); } } else { context.Response.Write("{"status":"error"}"); } } /// <summary> /// 从指定路径中获取图片，按照指定位置及大小截取相应的图片内容，并保存到指定路径下 /// </summary> /// <param name="filepath">图片来源路径及文件名(已使用Server.MapPath)</param> /// <param name="cutX">裁减的起始X轴坐标</param> /// <param name="cutY">裁减的起始Y坐标</param> /// <param name="cutwidth">裁减的宽度</param> /// <param name="cutheight">裁减的高度</param> /// <param name="savepath">裁减后的图片名称，路径为上一级的images文件夹中</param> /// <param name="context">所有http特定的信息对象</param> void CutImg(string filepath, int cutX, int cutY, int cutwidth, int cutheight, string savepath, string fileName, HttpContext context) { //TODO 判断文件类型暂时未做 //创建图像对象，由于web中有个image控件，会导致这个图像的类重复，需要带上使用命名空间 System.Drawing.Image oldImage = System.Drawing.Image.FromFile(filepath); //创建一个指定宽高的图像对象 System.Drawing.Image newImage = new Bitmap(cutwidth, cutheight); //创建存放截取图像的画布 Graphics newGraphics = Graphics.FromImage(newImage); //创建矩形对象，裁减是就是照着这个矩形来裁减的 Rectangle CutReatangle = new Rectangle(cutX, cutY, cutwidth, cutheight); //创建矩形对象，用于下面的指定裁减出来的图像在新画布上的显示情况 Rectangle showRectangle = new Rectangle(0, 0, cutwidth, cutheight); //执行裁减操作 newGraphics.DrawImage(oldImage, showRectangle, CutReatangle, GraphicsUnit.Pixel); //释放资源（除图像对象的资源） oldImage.Dispose(); newGraphics.Dispose(); DateTime time = DateTime.Now; CreateFile.CreateFolder(ReadConfig.GetHostUrl("HostUrl") + ReadConfig.GetHostUrl(fileName) + "\" + time.Year + "\" + time.Month + "\" + time.Day + "\"); //保存新图到指定路径 //newImage.Save(ReadConfig.GetHostUrl("HostUrl") + savepath, System.Drawing.Imaging.ImageFormat.Jpeg); if (fileName == "GYS_inLOGO100_40") { newImage.ImageWinvarOptions(ReadConfig.GetHostUrl("HostUrl") + savepath, 100, 40, 100); } else { newImage.ImageWinvarOptions(ReadConfig.GetHostUrl("HostUrl") + savepath, 200, 80, 100); } //释放新图像的资源，如果在保存前释放，会造成程序出错 newImage.Dispose(); } /// <summary> /// 判断原始文件后缀是否符合要求规范 /// </summary> /// <param name="filepath">原始文件路径</param> /// <returns>true为符合</returns> bool CheckImageMime(string filepath) { int typeLastShow = filepath.LastIndexOf('.'); string[] imageType = { "jpg", "gif", "png", "bmp" }; for (int i = 0; i < imageType.Length; i++) { //如果有后缀名且后缀符合规范 if (typeLastShow > 0 && imageType[i].Equals(filepath.Substring(typeLastShow + 1), StringComparison.OrdinalIgnoreCase)) { return true; } } return false; } /// <summary> /// 根据原始文件名返回前面加上操作时间的文件名 /// </summary> /// <param name="filepath">原文件全名（路径+文件名称）</param> /// <returns>新的文件名称</returns> string NewFileName(string filepath) { //获取文件原名 string oldFileName = filepath.Substring(filepath.LastIndexOf("\") + 1); //获取操作时间，原使用的是yyyyMMddHHmmssffff string date = DateTime.Now.ToString("yyyyMMddHHmmss") + DateTime.Now.Millisecond.ToString(); //新文件名 string newFileName = date + oldFileName; return newFileName; } public bool IsReusable { get { return false; } } } } |
压缩图片的方法
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace BCommon.common
{
public static class ImageWinvar
{
/// <summary>
/// 无损压缩图片
/// </summary>
/// <param name="img">原图片的文件流</param>
/// <param name="dFile">压缩后保存位置</param>
/// <param name="dHeight">高度</param>
/// <param name="dWidth"></param>
/// <param name="flag">压缩质量 1-100</param>
/// <returns></returns>
public static bool ImageWinvarOptions(this Image img, string dFile, int dWidth, int dHeight, int flag)
{
ImageFormat tFormat = img.RawFormat;
int sW = 0, sH = 0;
//按比例缩放
Size tem_size = new Size(img.Width, img.Height);
if (tem_size.Width > dHeight || tem_size.Width > dWidth) //将**改成c#中的或者操作符号
{
if ((tem_size.Width * dHeight) > (tem_size.Height * dWidth))
{
sW = dWidth;
sH = (dWidth * tem_size.Height) / tem_size.Width;
}
else
{
sH = dHeight;
sW = (tem_size.Width * dHeight) / tem_size.Height;
}
}
else
{
sW = tem_size.Width;
sH = tem_size.Height;
}
Bitmap ob = new Bitmap(dWidth, dHeight);
Graphics g = Graphics.FromImage(ob);
g.Clear(Color.WhiteSmoke);
g.CompositingQuality = CompositingQuality.HighQuality;
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(img, new Rectangle((dWidth - sW) / 2, (dHeight - sH) / 2, sW, sH), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel);
g.Dispose();
//以下代码为保存图片时，设置压缩质量
EncoderParameters ep = new EncoderParameters();
long[] qy = new long[1];
qy[0] = flag;//设置压缩的比例1-100
EncoderParameter eParam = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, qy);
ep.Param[0] = eParam;
try
{
ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageEncoders();
ImageCodecInfo jpegICIinfo = null;
for (int x = 0; x < arrayICI.Length; x++)
{
if (arrayICI[x].FormatDescription.Equals("JPEG"))
{
jpegICIinfo = arrayICI[x];
break;
}
}
if (jpegICIinfo != null)
{
ob.Save(dFile, jpegICIinfo, ep);//dFile是压缩后的新路径
}
else
{
ob.Save(dFile, tFormat);
}
return true;
}
catch
{
return false;
}
finally
{
img.Dispose();
ob.Dispose();
}
}
}
}