asp.net實現圖片在線上傳並在線裁剪

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”>

線上裁剪

asp.net實現圖片在線上傳並在線裁剪

asp.net實現圖片在線上傳並在線裁剪

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;

}

}

}

asp.net實現圖片在線上傳並在線裁剪

asp.net實現圖片在線上傳並在線裁剪

4、最後奉上Demo

https://files。cnblogs。com/files/lengzhan/ImgJcrop。zip