由於最近一段時間比較忙，發現好久沒寫博客了，給大家分享下最近搞的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"
)),
width: 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();
}
}
}
}