在微信公眾號里面需要上傳頭像，時間比較緊，調用學習jssdk并使用 來不及 就用了input
1、使用input：file標簽, 去調用系統默認相機，攝像，錄音功能，其實是有個capture屬性，直接說明需要調用什么功能
java" id="highlighter_323750">
|
1
2
3
4
5
|
<input type="file" accept="image/*" capture="camera"><input type="file" accept="video/*" capture="camcorder"><input type="file" accept="audio/*" capture="microphone"> |
capture表示，可以捕獲到系統默認的設備，比如：camera--照相機；camcorder--攝像機；microphone--錄音。
accept表示，直接打開系統文件目錄。
2、input:file標簽還支持一個multiple屬性，表示可以支持多選，如：
|
1
|
<input type="file" accept="image/*" multiple> |
加上這個multiple后，capture就沒啥用了，因為multiple是專門用來支持多選的。
用form表單提交
|
1
2
3
4
5
6
7
8
9
10
|
<form id="uploadform" class="mui-input-group" style="width: 80%;margin: 0 auto;margin-top: 70px" action="/jxs/uploadtou.do" method="post" enctype="multipart/form-data" > <div class="mui-input-row"> <label>圖片</label> <input required="required" class="mui-input-clear mui-input" type="file" name="file" id="photo_pick" accept="image/*"> </div> <div class="mui-content-padded" style="width: 90%;margin: 0 auto;margin-top: 5px;padding: 10px"> <input style="color:#ffffff ;width: 100%;background: #00f7de" value="上傳" type="submit"> </div> </form> |
上傳之后圖片顯示在頁面上
|
1
|
<div class="progress_dialog" style="margin-left:30px;margin-top:20px;width: 50%;height: 50%;"></div> |
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
|
<script> /*圖片地址 https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%e9%ab%98%e6%b8%85%e7%be%8e%e5%a5%b3%20%e4%b8%9d%e8%a2%9c%e5%b7%a8%e4%b9%b3&step_word=&hs=0&pn=1&spn=0&di=57234189540&pi=0&rn=1&tn=baiduimagedetail&is=0%2c0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=3589338782%2c536437810&os=3988412231%2c488396405&simid=3515890414%2c233897128&adpicid=0&lpn=0&ln=1389&fr=&fmq=1490709487003_r&fm=result&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3a%2f%2fwww.bz55.com%2fuploads%2fallimg%2f150416%2f139-1504161ak9.jpg&fromurl=ippr_z2c%24qazdh3fazdh3fooo_z%26e3bkzcc_z%26e3bv54azdh3f4jtgektzitazdh3f8l9c9_z%26e3bip4s&gsm=0&rpstart=0&rpnum=0 */ $(function() { $("#photo_pick").on("change", function () { var file = this.files[0]; photocompress(file, 50, $(".progress_dialog")[0]) $(".progress_dialog").show(); if (!this.files.length) return; var files = array.prototype.slice.call(this.files); if (files.length > 9) { alert("最多同時只可上傳9張圖片"); return; } /* files.foreach(function (file, i) { /!*var reader = new filereader(); reader.onload = function () { var imgo = document.createelement("img"); imgo.src = reader.result; }*!/ reader.readasdataurl(file); $(".progress_dialog").hide();*/ }); }) /* 三個參數 file：一個是文件(類型是圖片格式)， w：一個是文件壓縮的后寬度，寬度越小，字節越小 objdiv：一個是容器或者回調函數 photocompress() */ function photocompress(file, w, objdiv) { var ready = new filereader(); /*開始讀取指定的blob對象或file對象中的內容. 當讀取操作完成時,readystate屬性的值會成為done,如果設置了onloadend事件處理程序,則調用之.同時,result屬性中將包含一個data: url格式的字符串以表示所讀取文件的內容.*/ ready.readasdataurl(file); ready.onload = function () { var re = this.result; canvasdataurl(re, w, objdiv) } } function canvasdataurl(re, w, objdiv) { var newimg = new image(); newimg.src = re; var imgwidth, imgheight, offsetx = 0, offsety = 0; newimg.onload = function () { var img = document.createelement("img"); img.src = newimg.src; imgwidth = img.width; imgheight = img.height; var canvas = document.createelement("canvas"); canvas.width = w; canvas.height = w; var ctx = canvas.getcontext("2d"); ctx.clearrect(0, 0, w, w); if (imgwidth > imgheight) { imgwidth = w * imgwidth / imgheight; imgheight = w; offsetx = -math.round((imgwidth - w) / 6); } else { imgheight = w * imgheight / imgwidth; imgwidth = w; offsety = -math.round((imgheight - w) / 6); } ctx.drawimage(img, offsetx, offsety, imgwidth, imgheight); var base64 = canvas.todataurl("image/jpeg", 0.1); if (typeof objdiv == "object") { objdiv.appendchild(canvas); } else if (typeof objdiv == "function") { objdiv(base64); } } }</script> |
后臺接收以及壓縮
|
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
|
@postmapping("/uploadtou.do") public string uploadtou(@requestparam(value = "file") multipartfile file, httpservletrequest request) throws ioexception { system.out.println(file); string result = ""; if (!file.isempty()) { try { shopuser u = (shopuser) request.getsession().getattribute("currentuser"); string extname = file.getoriginalfilename(); string filename = file.getname(); string suffix = extname.substring(extname.lastindexof(".") + 1); system.err.println(suffix); date now = new date(); simpledateformat outformat = new simpledateformat("yyyymmddhhmmss"); string s = outformat.format(now); bufferedoutputstream bos = new bufferedoutputstream( new fileoutputstream(new file("d:\\xiangmu\\demo\\" + s + "." + suffix))); bos.write(file.getbytes()); bos.flush(); bos.close(); /** * compress 圖片縮放類的使用(縮略圖) * srcimage 為inputstream對象 * rectangle 為需要截圖的長方形坐標 * proportion 為壓縮比例 * **/ inputstream in = null; //縮放后需要保存的路徑 file savefile = new file("d:\\xiangmu\\demo\\" + s + s + "." + suffix); try { //原圖片的路徑 in = new fileinputstream(new file("d:\\xiangmu\\demo\\" + s + "." + suffix)); int length = in.available(); if (length / 1024 >= 10 && length / 1024 < 100) { if (compress(in, savefile, 10)) { system.out.println("圖片壓縮十倍！"); } } else if (length / 1024 >= 100 && length / 1024 < 1000) { if (compress(in, savefile, 100)) { system.out.println("圖片壓縮100倍！"); } } else if (length / 1024 >= 1000 && length / 1024 < 10000) { if (compress(in, savefile, 1000)) { system.out.println("圖片壓縮1000倍！"); } } else if (length / 1024 < 10 && length / 1024 > 0) { if (compress(in, savefile, 1)) { system.out.println("圖片壓縮1倍！"); } } } catch (exception e) { e.printstacktrace(); } finally { in.close(); } system.out.println(filename); int a = shopservice.updateimg(u.getid(), filename); system.out.println(filename); } catch (exception e) { e.printstacktrace(); } } else { } return "wode.html"; } |
圖片處理類
|
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
|
package com.example.springbootshop.util;import org.junit.test;import java.awt.graphics2d;import java.awt.rectangle;import java.awt.renderinghints;import java.awt.geom.affinetransform;import java.awt.image.bufferedimage;import java.awt.image.colormodel;import java.awt.image.writableraster;import java.io.file;import java.io.fileinputstream;import java.io.filenotfoundexception;import java.io.ioexception;import java.io.inputstream;import javax.imageio.imageio;/** * 圖片工具類，完成圖片的截取 * 所有方法返回值均未boolean型 */public class imagehelper { /** * 實現圖像的等比縮放 * @param source * @param targetw * @param targeth * @return */ private static bufferedimage resize(bufferedimage source, int targetw, int targeth) { // targetw，targeth分別表示目標長和寬 int type = source.gettype(); bufferedimage target = null; double sx = (double) targetw / source.getwidth(); double sy = (double) targeth / source.getheight(); // 這里想實現在targetw，targeth范圍內實現等比縮放。如果不需要等比縮放 // 則將下面的if else語句注釋即可 if (sx < sy) { sx = sy; targetw = (int) (sx * source.getwidth()); } else { sy = sx; targeth = (int) (sy * source.getheight()); } if (type == bufferedimage.type_custom) { // handmade colormodel cm = source.getcolormodel(); writableraster raster = cm.createcompatiblewritableraster(targetw, targeth); boolean alphapremultiplied = cm.isalphapremultiplied(); target = new bufferedimage(cm, raster, alphapremultiplied, null); } else target = new bufferedimage(targetw, targeth, type); graphics2d g = target.creategraphics(); // smoother than exlax: g.setrenderinghint(renderinghints.key_interpolation, renderinghints.value_interpolation_bicubic); g.drawrenderedimage(source, affinetransform.getscaleinstance(sx, sy)); g.dispose(); return target; } /** * 實現圖像的等比縮放和縮放后的截取, 處理成功返回true, 否則返回false * @param infilepath 要截取文件的路徑 * @param outfilepath 截取后輸出的路徑 * @param width 要截取寬度 * @param hight 要截取的高度 * @throws exception */ public static boolean compress(string infilepath, string outfilepath, int width, int hight) { boolean ret = false; file file = new file(infilepath); file savefile = new file(outfilepath); inputstream in = null; try { in = new fileinputstream(file); ret = compress(in, savefile, width, hight); } catch (filenotfoundexception e) { e.printstacktrace(); ret = false; } finally{ if(null != in){ try { in.close(); } catch (ioexception e) { e.printstacktrace(); } } } return ret; } /** * 實現圖像的等比縮放和縮放后的截取, 處理成功返回true, 否則返回false * @param in 要截取文件流 * @param outfilepath 截取后輸出的路徑 * @param width 要截取寬度 * @param hight 要截取的高度 * @throws exception */ public static boolean compress(inputstream in, file savefile, int width, int hight) {// boolean ret = false; bufferedimage srcimage = null; try { srcimage = imageio.read(in); } catch (ioexception e) { e.printstacktrace(); return false; } if (width > 0 || hight > 0) { // 原圖的大小 int sw = srcimage.getwidth(); int sh = srcimage.getheight(); // 如果原圖像的大小小于要縮放的圖像大小，直接將要縮放的圖像復制過去 if (sw > width && sh > hight) { srcimage = resize(srcimage, width, hight); } else { string filename = savefile.getname(); string formatname = filename.substring(filename .lastindexof('.') + 1); try { imageio.write(srcimage, formatname, savefile); } catch (ioexception e) { e.printstacktrace(); return false; } return true; } } // 縮放后的圖像的寬和高 int w = srcimage.getwidth(); int h = srcimage.getheight(); // 如果縮放后的圖像和要求的圖像寬度一樣，就對縮放的圖像的高度進行截取 if (w == width) { // 計算x軸坐標 int x = 0; int y = h / 2 - hight / 2; try { savesubimage(srcimage, new rectangle(x, y, width, hight), savefile); } catch (ioexception e) { e.printstacktrace(); return false; } } // 否則如果是縮放后的圖像的高度和要求的圖像高度一樣，就對縮放后的圖像的寬度進行截取 else if (h == hight) { // 計算x軸坐標 int x = w / 2 - width / 2; int y = 0; try { savesubimage(srcimage, new rectangle(x, y, width, hight), savefile); } catch (ioexception e) { e.printstacktrace(); return false; } } return true; } /** * 實現圖像的等比縮放和縮放后的截取, 處理成功返回true, 否則返回false * @param in 圖片輸入流 * @param savefile 壓縮后的圖片輸出流 * @param proportion 壓縮比 * @throws exception */ public static boolean compress(inputstream in, file savefile, int proportion) { if(null == in ||null == savefile ||proportion < 1){// 檢查參數有效性 //loggerutil.error(imagehelper.class, "--invalid parameter, do nothing!"); return false; } bufferedimage srcimage = null; try { srcimage = imageio.read(in); } catch (ioexception e) { e.printstacktrace(); return false; } // 原圖的大小 int width = srcimage.getwidth() / proportion; int hight = srcimage.getheight() / proportion; srcimage = resize(srcimage, width, hight); // 縮放后的圖像的寬和高 int w = srcimage.getwidth(); int h = srcimage.getheight(); // 如果縮放后的圖像和要求的圖像寬度一樣，就對縮放的圖像的高度進行截取 if (w == width) { // 計算x軸坐標 int x = 0; int y = h / 2 - hight / 2; try { savesubimage(srcimage, new rectangle(x, y, width, hight), savefile); } catch (ioexception e) { e.printstacktrace(); return false; } } // 否則如果是縮放后的圖像的高度和要求的圖像高度一樣，就對縮放后的圖像的寬度進行截取 else if (h == hight) { // 計算x軸坐標 int x = w / 2 - width / 2; int y = 0; try { savesubimage(srcimage, new rectangle(x, y, width, hight), savefile); } catch (ioexception e) { e.printstacktrace(); return false; } } return true; } /** * 實現縮放后的截圖 * @param image 縮放后的圖像 * @param subimagebounds 要截取的子圖的范圍 * @param subimagefile 要保存的文件 * @throws ioexception */ private static void savesubimage(bufferedimage image, rectangle subimagebounds, file subimagefile) throws ioexception { if (subimagebounds.x < 0 || subimagebounds.y < 0 || subimagebounds.width - subimagebounds.x > image.getwidth() || subimagebounds.height - subimagebounds.y > image.getheight()) { //loggerutil.error(imagehelper.class, "bad subimage bounds"); return; } bufferedimage subimage = image.getsubimage(subimagebounds.x,subimagebounds.y, subimagebounds.width, subimagebounds.height); string filename = subimagefile.getname(); string formatname = filename.substring(filename.lastindexof('.') + 1); imageio.write(subimage, formatname, subimagefile); } @test public static void main(string[] args) throws exception { /** * savesubimage 截圖類的使用 * srcimage 為bufferedimage對象 * rectangle 為需要截圖的長方形坐標 * savefile 需要保存的路徑及名稱 * **/ //需要截圖的長方形坐標 /*rectangle rect =new rectangle(); rect.x=40; rect.y=40; rect.height=160; rect.width=160; inputstream in = null; //需要保存的路徑及名稱 file savefile = new file("d:\\ioc\\files\\aaa2.jpg"); //需要進行處理的圖片的路徑 in = new fileinputstream(new file("d:\\ioc\\files\\aaa.jpg")); bufferedimage srcimage = null; //將輸入的數據轉為bufferedimage對象 srcimage = imageio.read(in); imagehelper img=new imagehelper(); img.savesubimage(srcimage, rect, savefile);*/ /** * compress 圖片縮放類的使用(縮略圖) * srcimage 為inputstream對象 * rectangle 為需要截圖的長方形坐標 * proportion 為壓縮比例 * **/ inputstream in = null; //縮放后需要保存的路徑 file savefile = new file("d:\\xiangmu\\demo\\20180523192742img_0049123.jpg"); try { //原圖片的路徑 in = new fileinputstream(new file("d:\\xiangmu\\demo\\20180523192742img_0049.jpg")); if(compress(in, savefile, 10)){ system.out.println("圖片壓縮十倍！"); } } catch (exception e) { e.printstacktrace(); } finally { in.close(); } }} |
以上這篇java input 調用手機相機和本地照片上傳圖片到服務器然后壓縮的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://www.cnblogs.com/NCL--/p/9103679.html
