1、說明
接上一篇文章uploadify實現多附件上傳完成後,又突然用到頭像上傳並在線裁剪。在網上找個眾多例子都沒有符合要求的,有一篇文章寫的不錯,就是文旺老兄寫的這篇Asp。Net平臺下的圖片線上裁剪功能的實現,大家可以看一下,寫的真不錯。我就是在參考了他的程式碼下,結合uploadify使用一般處理程式實現了這個功能,寫下了這篇在asp。net實現圖片在線上傳並在線裁剪,有點繞口哈,廢話不多說,現奉上程式碼,供同學們交流參考,有什麼不對的地方,望請大家多多提提建議,多謝!多謝!
2、組成
首先說明一下程式碼實現所用到的技術,僅供參考:
開發工具:vs2010
目標框架:。NET Framework3。5
jcrop:Jcrop。js v0。9。12
Uploadify:uploadify-v3。1
Jquery:jquery-1。9。0。js
最後我會將整個Demo上傳,如果同學們的電腦上有開發環境可直接開啟專案解決方案執行。
3、程式碼
Default。aspx(測試頁面)
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
<%@ Page Language=“C#” AutoEventWireup=“true” CodeBehind=“Default。aspx。cs” Inherits=“ImgJcrop。_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1。0 Transitional//EN” “http://www。w3。org/TR/xhtml1/DTD/xhtml1-transitional。dtd”>
$(function () {
var jcrop_api, boundx, boundy;
$(“#file_upload”)。uploadify({
“auto”: true,
“buttonText”: “選擇圖片”,
“swf”: “Scripts/uploadify-v3。1/uploadify。swf”,
“uploader”: “App_Handler/Uploadify。ashx?action=upload”,
“fileTypeExts”: “*。jpg; *。jpeg; *。gif; *。png; *。bmp”,
“fileTypeDesc”: “支援的格式:”,
“multi”: false,
“removeCompleted”: false,
“onUploadStart”: function (file) {
$(“#file_upload-queue”)。hide();
},
“onUploadSuccess”: function (file, data, response) {
var row = eval(“[” + data + “]”);
if (row[0][“status”] == 0) {
$(“#cutimg”)。html(“
$(“#cutimg img”)。each(function () { $(this)。attr(“src”, row[0][“message”]); });
$(“#hidImgUrl”)。val(row[0][“message”]);
$(‘#imgOriginal’)。Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
//maxSize: [120, 120],
setSelect: [0, 0, 120, 120]
}, function () {
var bounds = this。getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
} else {
alert(row[0][“message”]);
}
}
});
function updatePreview(c) {
if (parseInt(c。w) > 0) {
var rx = 120 / c。w;
var ry = 120 / c。h;
$(“#imgPreview”)。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”
});
}
$(“#hidXone”)。val(c。x);
$(“#hidYone”)。val(c。y);
$(“#hidXtwo”)。val(c。hidXtwo);
$(“#hidYtwo”)。val(c。hidYtwo);
$(“#hidImgWidth”)。val(c。w);
$(“#hidImgHeight”)。val(c。h);
};
});
function cutSaveImg() {
$。ajax({
type: “post”,
url: “App_Handler/Uploadify。ashx?action=cutsaveimg”,
data: { strImgUrl: $(“#imgOriginal”)[0]。src, hidXone: $(“#hidXone”)。val(), hidYone: $(“#hidYone”)。val(), hidImgWidth: $(“#hidImgWidth”)。val(), hidImgHeight: $(“#hidImgHeight”)。val() },
dataType: “html”,
success: function (data) {
var row = eval(“[” + data + “]”);
if (row[0][“status”] == 0) { }
alert(row[0][“message”]);
}
});
}
Uploadify。ashx(一般處理程式)
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<%@ WebHandler Language=“C#” Class=“UploadifyUpload” %>
using System;
using System。Collections;
using System。Data;
using System。Web;
using System。Linq;
using System。Web。Services;
using System。Web。Services。Protocols;
using System。Web。SessionState;
using System。IO;
using System。Collections。Generic;
using System。Web。UI。WebControls;
using System。Text;
using System。Drawing;
using System。Drawing。Imaging;
public class UploadifyUpload : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context。Response。ContentType = “text/plain”;
context。Response。Charset = “utf-8”;
string action = context。Request[“action”];
switch (action)
{
case “upload”:
//上傳圖片
upload(context);
break;
case “cutsaveimg”:
//裁剪並儲存
cutsaveimg(context);
break;
}
context。Response。End();
}
///
/// 上傳圖片
///
///
private void upload(HttpContext context)
{
HttpPostedFile postedFile = context。Request。Files[“Filedata”];
if (postedFile != null)
{
string fileName, fileExtension;
int fileSize;
fileName = postedFile。FileName;
fileSize = postedFile。ContentLength;
if (fileName != “”)
{
fileExtension = postedFile。FileName。Substring(postedFile。FileName。LastIndexOf(‘。’));
string strPath = context。Server。MapPath(“/”) + “\\App_File\\Upload\\”;//設定檔案的路徑
string strFileName = “upload” + DateTime。Now。ToString(“yyyyMMddHHmmss”) + fileExtension;
string strFileUrl = strPath + strFileName;//儲存檔案路徑
if (!Directory。Exists(strPath))
{
Directory。CreateDirectory(strPath);
}
postedFile。SaveAs(strFileUrl);//先儲存原始檔
context。Response。Write(“{\”status\“:0,\”message\“:\”/App_File/Upload/“ + strFileName + ”\“}”);
}
else
{
context。Response。Write(“{\”status\“:1,\”message\“:\”上傳失敗!\“}”);
}
}
else
{
context。Response。Write(“{\”status\“:1,\”message\“:\”上傳失敗!\“}”);
}
}
///
/// 裁剪並儲存圖片
///
///
private void cutsaveimg(HttpContext context)
{
string strImgUrl = context。Request[“strImgUrl”];
string strXone = context。Request[“hidXone”];
string strYone = context。Request[“hidYone”];
string strImgWidth = context。Request[“hidImgWidth”];
string strImgHeight = context。Request[“hidImgHeight”];
string[] urls = strImgUrl。Split(‘/’);
string str_url = urls。Last();
try
{
string strOldFiel = context。Server。MapPath(“~/App_File/Upload/”);
string strNewFiel = context。Server。MapPath(“~/App_File/Cut/”);
string strOldUrl = Path。Combine(strOldFiel, str_url);
string strNewUrl = Path。Combine(strNewFiel, “cut” + DateTime。Now。ToString(“yyyyMMddHHmmss”) + “。” + str_url。Split(‘。’)[1]);
if (!Directory。Exists(strNewFiel))
{
Directory。CreateDirectory(strNewFiel);
}
int intStartX = int。Parse(strXone);
int intStartY = int。Parse(strYone);
int intWidth = int。Parse(strImgWidth);
int intHeight = int。Parse(strImgHeight);
CutGeneratedImage(intStartX, intStartY, intWidth, intHeight, strOldUrl, strNewUrl);
context。Response。Write(“{\”status\“:0,\”message\“:\”裁剪成功並儲存!\“}”);
}
catch
{
context。Response。Write(“{\”status\“:1,\”message\“:\”裁剪失敗!\“}”);
}
}
///
/// 裁剪圖片
///
/// 要縮小裁剪圖片寬度
/// 要縮小裁剪圖片長度
/// 要處理圖片路徑
/// 處理完畢圖片路徑
public void CutGeneratedImage(int intStartX, int intStartY, int intWidth, int intHeight, string strOldImgUrl, string strNewImgUrl)
{
//上傳標準圖大小
int intStandardWidth = 120;
int intStandardHeight = 120;
int intReduceWidth = 0; // 縮小的寬度
int intReduceHeight = 0; // 縮小的高度
int intCutOutWidth = 0; // 裁剪的寬度
int intCutOutHeight = 0; // 裁剪的高度
int level = 100; //縮圖的質量 1-100的範圍
//獲得縮小,裁剪大小
if (intStandardHeight * intWidth / intStandardWidth > intHeight)
{
intReduceWidth = intWidth;
intReduceHeight = intStandardHeight * intWidth / intStandardWidth;
intCutOutWidth = intWidth;
intCutOutHeight = intHeight;
}
else if (intStandardHeight * intWidth / intStandardWidth < intHeight)
{
intReduceWidth = intStandardWidth * intHeight / intStandardHeight;
intReduceHeight = intHeight;
intCutOutWidth = intWidth;
intCutOutHeight = intHeight;
}
else
{
intReduceWidth = intWidth;
intReduceHeight = intHeight;
intCutOutWidth = intWidth;
intCutOutHeight = intHeight;
}
//透過連線建立Image物件
//System。Drawing。Image oldimage = System。Drawing。Image。FromFile(strOldImgUrl);
//oldimage。Save(Server。MapPath(“tepm。jpg”));
//oldimage。Dispose();
//縮小圖片
Bitmap bm = new Bitmap(strOldImgUrl);
//處理JPG質量的函式
ImageCodecInfo[] codecs = ImageCodecInfo。GetImageEncoders();
ImageCodecInfo ici = null;
foreach (ImageCodecInfo codec in codecs)
{
if (codec。MimeType == “image/jpeg”)
{
ici = codec;
break;
}
}
EncoderParameters ep = new EncoderParameters();
ep。Param[0] = new EncoderParameter(System。Drawing。Imaging。Encoder。Quality, (long)level);
//裁剪圖片
Rectangle cloneRect = new Rectangle(intStartX, intStartY, intCutOutWidth, intCutOutHeight);
PixelFormat format = bm。PixelFormat;
Bitmap cloneBitmap = bm。Clone(cloneRect, format);
//儲存圖片
cloneBitmap。Save(strNewImgUrl, ici, ep);
bm。Dispose();
}
public bool IsReusable
{
get
{
return false;
}
}
}
4、最後奉上Demo
https://files。cnblogs。com/files/lengzhan/ImgJcrop。zip