Home Esplora Aiuto
Registrati Accedi
bulomakaka
/
ekexiu.app
Segui 2
Vota 1
Forka 0
Codice Problemi 0 Pull Requests 0 Commit 366 Rilasci 0 Wiki
Sfoglia il codice sorgente

iOS拍照功能优化

xuchunyang 8 anni fa
parent
11908032d0
commit
fa95a948b4
1 ha cambiato i file con 217 aggiunte e 215 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 217 215
      app/js/picture-upload.js

+ 217 - 215
app/js/picture-upload.js
Vedi File

1 
mui.ready(function(){
2 
	mui.plusReady(function() {
3 
		//获取手机屏幕宽高
4 
		var c_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
5 
		var c_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
6 
		var can_obj = document.querySelector("#canvas");
7 
		var can_obj2 = document.querySelector("#canvas2");
8 
		var img_obj = document.querySelector("#canvas_img");
9 
		var img_obj2 = document.querySelector("#canvas_img2");
10 
		var div_obj = document.querySelector("#canvas_div");
11 
		var canvas_ok = document.querySelector("#canvas_ok");
12 
		var list = plus.webview.currentWebview();
13 
		var userId = plus.storage.getItem('userid');
14 
		var Orientation;
15 
		var angle = 0;
16 
		var flag = list.flag;
17 
		var headFlag = list.headFlag;
18 
		var resouFlag = list.resouFlag;
19 
		var toph = (c_h - c_w - 1) / 2;
20 
		var bottomh = (c_h - c_w + 99) / 2;
21 
		var posX = 0,
22 
			posY = 0; //相对坐标
23 
		var _x = 0,
24 
			_y = 0;
25 
		var left_x = 0,
26 
			left_y = 0; //计算 偏移量 设置画布中的X，Y轴 (加偏移量)
27
28 
		img_obj.setAttribute("src", list.imgurl);
29 
		can_obj.width = c_w - 50;
30 
		can_obj.height = c_w - 50;
31 
		can_obj.style.top = (c_h - c_w - 2) / 2 + "px";
32 
		div_obj.style.borderWidth = toph + "px 23px " + bottomh + "px 24px";
33 
		//旋转角度
34 
		function rotateImage(deg) {
35 
			can_obj2.width = img_obj.height;
36 
			can_obj2.height = img_obj.width;
37 
			var ctx = can_obj2.getContext("2d");
38 
			ctx.save();
39 
			ctx.translate(img_obj.height / 2, img_obj.width / 2);
40 
			ctx.rotate(deg * Math.PI / 180);
41 
			ctx.drawImage(img_obj, -img_obj.width / 2, -img_obj.height / 2);
42 
			ctx.restore();
43 
			document.getElementById("canvas_img2").src = can_obj2.toDataURL();
44 
			var imgh = document.getElementById("canvas_img2");
45 
			setTimeout(function() {
46 
				autoResizeImage(c_w, c_h, imgh);
47 
			}, 100);
1 
mui.plusReady(function() {
2 
	//获取手机屏幕宽高
3 
	var c_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
4 
	var c_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
5 
	var can_obj = document.querySelector("#canvas");
6 
	var can_obj2 = document.querySelector("#canvas2");
7 
	var img_obj = document.querySelector("#canvas_img");
8 
	var img_obj2 = document.querySelector("#canvas_img2");
9 
	var div_obj = document.querySelector("#canvas_div");
10 
	var canvas_ok = document.querySelector("#canvas_ok");
11 
	var list = plus.webview.currentWebview();
12 
	var userId = plus.storage.getItem('userid');
13 
	var Orientation;
14 
	var angle = 0;
15 
	var flag = list.flag;
16 
	var headFlag = list.headFlag;
17 
	var resouFlag = list.resouFlag;
18 
	var toph = (c_h - c_w - 1) / 2;
19 
	var bottomh = (c_h - c_w + 99) / 2;
20 
	var posX = 0,
21 
		posY = 0; //相对坐标
22 
	var _x = 0,
23 
		_y = 0;
24 
	var left_x = 0,
25 
		left_y = 0; //计算 偏移量 设置画布中的X，Y轴 (加偏移量)
26
27 
	img_obj.setAttribute("src", list.imgurl);
28 
	can_obj.width = c_w - 50;
29 
	can_obj.height = c_w - 50;
30 
	can_obj.style.top = (c_h - c_w - 2) / 2 + "px";
31 
	div_obj.style.borderWidth = toph + "px 23px " + bottomh + "px 24px";
32 
	//旋转角度
33 
	function rotateImage(deg) {
34 
		can_obj2.width = img_obj.height;
35 
		can_obj2.height = img_obj.width;
36 
		var ctx = can_obj2.getContext("2d");
37 
		ctx.save();
38 
		ctx.translate(img_obj.height / 2, img_obj.width / 2);
39 
		ctx.rotate(deg * Math.PI / 180);
40 
		ctx.drawImage(img_obj, -img_obj.width / 2, -img_obj.height / 2);
41 
		ctx.restore();
42 
		document.getElementById("canvas_img2").src = can_obj2.toDataURL();
43 
		var imgh = document.getElementById("canvas_img2");
44 
		/*setTimeout(function() {
45 
			autoResizeImage(c_w, c_h, imgh);
46 
		}, 100);*/
47 
		imgh.onload =function(){
48 
			autoResizeImage(c_w, c_h, imgh)
48 
		}
49 
		}
49 
		//初始化图片加载完成
50 
		img_obj.onload = function() {
51 
			EXIF.getData(img_obj, function() {
52 
				EXIF.getAllTags(this);
53 
				Orientation = EXIF.getTag(this, 'Orientation');
54 
				//alert(Orientation)
55 
				if(Orientation == 6) {
56 
					angle = 0;
57 
					rotateImage(90);
58 
				} else if(Orientation == 3) {
59 
					angle = 0;
60 
					rotateImage(180);
61 
				} else if(Orientation == 8) {
62 
					angle = 0;
63 
					rotateImage(270);
64 
				} else {
65 
					var imgsrc = img_obj.getAttribute("src");
66 
					document.getElementById("canvas_img2").src = imgsrc;
67 
					var imgh = document.getElementById("canvas_img2");
68 
					setTimeout(function() {
69 
						autoResizeImage(c_w, c_h, imgh)
70 
					}, 100);
50 
	}
51 
	//初始化图片加载完成
52 
	img_obj.onload = function() {
53 
		//autoResizeImage(c_w, c_h, img_obj)
54 
		EXIF.getData(img_obj, function() {
55 
			EXIF.getAllTags(this);
56 
			Orientation = EXIF.getTag(this, 'Orientation');
57 
			//alert(Orientation)
58 
			if(Orientation == 6) {
59 
				angle = 0;
60 
				rotateImage(90);
61 
			} else if(Orientation == 3) {
62 
				angle = 0;
63 
				rotateImage(180);
64 
			} else if(Orientation == 8) {
65 
				angle = 0;
66 
				rotateImage(270);
67 
			} else {
68 
				var imgsrc = img_obj.getAttribute("src");
69 
				document.getElementById("canvas_img2").src = imgsrc;
70 
				var imgh = document.getElementById("canvas_img2");
71 
				imgh.onload =function(){
72 
					autoResizeImage(c_w, c_h, imgh)
71 
				}
73 
				}
72 
				imageMove();
73 
			});
74 
		}
75
76 
		//手指移动图片
77 
		function imageMove() {
78 
			document.querySelector("#canvas_div").addEventListener('touchstart', touch, false);
79 
			document.querySelector("#canvas_div").addEventListener('touchmove', touch, false);
80 
			document.querySelector("#canvas_div").addEventListener('touchend', touch, false);
81 
			ctx_img = can_obj.getContext("2d");
82
83 
			function touch(event) {
84 
				var event = event || window.event;
85 
				event.preventDefault(); //阻止浏览器或body 其他冒泡事件
86 
				var mv_x1 = event.changedTouches[0].clientX,
87 
					mv_y1 = event.changedTouches[0].clientY; //手指坐标
88 
				var img_left = img_obj2.left,
89 
					img_top = img_obj2.top; //图片坐标
90 
				if(event.touches.length == 1) { //单指操作
91 
					if(event.type == "touchstart") { //开始移动
92 
						posX = mv_x1 - img_obj2.offsetLeft; //获取img相对坐标
93 
						//posd = mv_x1 - img_obj.offsetRight; //获取img相对坐标
94 
						posY = mv_y1 - img_obj2.offsetTop;
95 
					} else if(event.type == "touchmove") { //移动中
96 
						_x = mv_x1 - posX; //移动坐标
97 
						_y = mv_y1 - posY;
98 
						img_obj2.style.left = _x + "px";
99 
						img_obj2.style.top = _y + "px";
100 
					}
74 
			}
75 
			imageMove();
76 
		});
77 
	}
78
79 
	//手指移动图片
80 
	function imageMove() {
81 
		document.querySelector("#canvas_div").addEventListener('touchstart', touch, false);
82 
		document.querySelector("#canvas_div").addEventListener('touchmove', touch, false);
83 
		document.querySelector("#canvas_div").addEventListener('touchend', touch, false);
84 
		ctx_img = can_obj.getContext("2d");
85
86 
		function touch(event) {
87 
			var event = event || window.event;
88 
			event.preventDefault(); //阻止浏览器或body 其他冒泡事件
89 
			var mv_x1 = event.changedTouches[0].clientX,
90 
				mv_y1 = event.changedTouches[0].clientY; //手指坐标
91 
			var img_left = img_obj2.left,
92 
				img_top = img_obj2.top; //图片坐标
93 
			if(event.touches.length == 1) { //单指操作
94 
				if(event.type == "touchstart") { //开始移动
95 
					posX = mv_x1 - img_obj2.offsetLeft; //获取img相对坐标
96 
					//posd = mv_x1 - img_obj.offsetRight; //获取img相对坐标
97 
					posY = mv_y1 - img_obj2.offsetTop;
98 
				} else if(event.type == "touchmove") { //移动中
99 
					_x = mv_x1 - posX; //移动坐标
100 
					_y = mv_y1 - posY;
101 
					img_obj2.style.left = _x + "px";
102 
					img_obj2.style.top = _y + "px";
101 
				}
103 
				}
102 
			}
104 
			}
103 
		}
105 
		}
104
105 
		//裁剪确定的图片
106 
		function save_img() {
107 
			var ctx_X = (can_obj.width - img_obj2.width) / 2,
108 
				ctx_Y = (can_obj.height - img_obj2.height) / 2;
109 
			if(_x == 0) {
110 
				ctx_img.drawImage(img_obj2, ctx_X, ctx_Y, img_obj2.width, img_obj2.height); //初始化 canvas 加入图片
111 
			} else {
112 
				ctx_img.drawImage(img_obj2, _x + left_x / 2 - 25, _y - parseFloat(can_obj.style.top) + left_y / 2, img_obj2.width, img_obj2.height); //初始化 canvas 加入图片
113 
			}
114 
			var base64 = can_obj.toDataURL("image/jpeg", 1);
115 
			var subbase = base64.substring(22);
116 
			document.querySelector("#img_base64").value = subbase;
106 
	}
107
108 
	//裁剪确定的图片
109 
	function save_img() {
110 
		var ctx_X = (can_obj.width - img_obj2.width) / 2,
111 
			ctx_Y = (can_obj.height - img_obj2.height) / 2;
112 
		if(_x == 0) {
113 
			ctx_img.drawImage(img_obj2, ctx_X, ctx_Y, img_obj2.width, img_obj2.height); //初始化 canvas 加入图片
114 
		} else {
115 
			ctx_img.drawImage(img_obj2, _x + left_x / 2 - 25, _y - parseFloat(can_obj.style.top) + left_y / 2, img_obj2.width, img_obj2.height); //初始化 canvas 加入图片
117 
		}
116 
		}
118
119 
		//图片自适应
120 
		function autoResizeImage(maxWidth, maxHeight, objImg) {
121 
			var w = objImg.width;
122 
			var h = objImg.height;
123 
			wRatio = maxWidth / w;
124 
			hRatio = maxHeight / h;
125 
			if(w > maxWidth) {
126 
				if(w > h) {
127 
					objImg.height = maxWidth - 50;
128 
				} else {
129 
					objImg.width = c_w - 46;
130 
				}
131 
			} else {
132 
				objImg.width = maxWidth - 50;
117 
		var base64 = can_obj.toDataURL("image/jpeg", 1);
118 
		var subbase = base64.substring(22);
119 
		document.querySelector("#img_base64").value = subbase;
120 
	}
121
122 
	//图片自适应
123 
	function autoResizeImage(maxWidth, maxHeight, objImg) {
124 
		var w = objImg.width;
125 
		var h = objImg.height;
126 
		wRatio = maxWidth / w;
127 
		hRatio = maxHeight / h;
128 
		if(w > maxWidth) {
129 
			if(w > h) {
133 
				objImg.height = maxWidth - 50;
130 
				objImg.height = maxWidth - 50;
131 
			} else {
132 
				objImg.width = c_w - 46;
134 
			}
133 
			}
135 
			objImg.style.top = (c_h - objImg.height - 50) / 2 + "px";
136 
			objImg.style.left = (c_w - objImg.width) / 2 + "px";
134 
		} else {
135 
			objImg.width = maxWidth - 50;
136 
			objImg.height = maxWidth - 50;
137 
		}
137 
		}
138
139 
		//提交图片
140 
		canvas_ok.addEventListener("tap", function() {
141 
			save_img();
142 
			//return;
143 
			imgOk = document.querySelector("#img_base64").value;
144 
			//alert(angle)
145 
			console.log(flag);
146 
			console.log(list.resourceId);
147 
			//alert(angle)
148 
			if(flag == 1) {
149 
				var urlAdd = baseUrl + "/ajax/images/saveResImg";
150 
				var $data = {
151 
					"resourceId": list.resourceId,
152 
					"base64": imgOk,
153 
					"angle": angle,
154 
				}
155 
			} else {
156 
				var urlAdd = baseUrl + '/ajax/image/saveHead';
157 
				var $data = {
158 
					"id": userId,
159 
					"base64": imgOk,
160 
					"angle": angle,
161 
				}
138 
		objImg.style.top = (c_h - objImg.height - 50) / 2 + "px";
139 
		objImg.style.left = (c_w - objImg.width) / 2 + "px";
140 
	}
141
142 
	//提交图片
143 
	canvas_ok.addEventListener("tap", function() {
144 
		save_img();
145 
		//return;
146 
		imgOk = document.querySelector("#img_base64").value;
147 
		//alert(angle)
148 
		console.log(flag);
149 
		console.log(list.resourceId);
150 
		//alert(angle)
151 
		if(flag == 1) {
152 
			var urlAdd = baseUrl + "/ajax/images/saveResImg";
153 
			var $data = {
154 
				"resourceId": list.resourceId,
155 
				"base64": imgOk,
156 
				"angle": angle,
157 
			}
158 
		} else {
159 
			var urlAdd = baseUrl + '/ajax/image/saveHead';
160 
			var $data = {
161 
				"id": userId,
162 
				"base64": imgOk,
163 
				"angle": angle,
162 
			}
164 
			}
163 
			mui.ajax(urlAdd, {
164 
				data: $data,
165 
				dataType: 'json', //数据格式类型
166 
				type: 'post', //http请求类型
167 
				timeout: 10000,
168 
				success: function(data) {
169 
					if(data.success) {
170 
						plus.nativeUI.toast("图片上传成功", toastStyle);
171 
						if(flag == 0) {
172 
							if(headFlag == 2) {
173 
								var Page = plus.webview.getWebviewById('html/studentUpdata.html');
174 
								mui.fire(Page, 'newId');
175 
							} else if(headFlag == 1) {
176 
								var Page = plus.webview.getWebviewById('html/companyUpdata.html');
177 
								mui.fire(Page, 'newId', {
178 
									rd: 1
179 
								});
180 
							} else if(headFlag == 0) {
181 
								var Page = plus.webview.getWebviewById('html/proinforupdate.html');
182 
								mui.fire(Page, 'newId', {
183 
									rd: 1
184 
								});
185 
							} else if(headFlag == 4) {
186 
								var Page = plus.webview.getWebviewById('html/researcher.html');
187 
								mui.fire(Page, 'newId', {
188 
									rd: 1
189 
								});
190 
							}
191 
							var Pa = plus.webview.getWebviewById('html/myaccount.html');
192 
							mui.fire(Pa, 'photoUser');
193 
						} else if(flag == 1) {
194 
							if(resouFlag == 0) {
195 
								var Page = plus.webview.getWebviewById('html/proinforupdate.html');
196 
								mui.fire(Page, 'newId', {
197 
									rd: 1
198 
								});
199 
							} else if(resouFlag == 1) {
200 
								var Page = plus.webview.getWebviewById('html/companyUpdata.html');
201 
								mui.fire(Page, 'newId', {
202 
									rd: 1
203 
								});
204 
							} else if(resouFlag == 2) {
205 
								var Page = plus.webview.getWebviewById('html/studentUpdata.html');
206 
								mui.fire(Page, 'newId', {
207 
									rd: 1
208 
								});
209 
							}
210 
							var Pa = plus.webview.getWebviewById('resinforupdate.html');
211 
							mui.fire(Pa, 'resourceMess');
165 
		}
166 
		mui.ajax(urlAdd, {
167 
			data: $data,
168 
			dataType: 'json', //数据格式类型
169 
			type: 'post', //http请求类型
170 
			timeout: 10000,
171 
			success: function(data) {
172 
				if(data.success) {
173 
					plus.nativeUI.toast("图片上传成功", toastStyle);
174 
					if(flag == 0) {
175 
						if(headFlag == 2) {
176 
							var Page = plus.webview.getWebviewById('html/studentUpdata.html');
177 
							mui.fire(Page, 'newId');
178 
						} else if(headFlag == 1) {
179 
							var Page = plus.webview.getWebviewById('html/companyUpdata.html');
180 
							mui.fire(Page, 'newId', {
181 
								rd: 1
182 
							});
183 
						} else if(headFlag == 0) {
184 
							var Page = plus.webview.getWebviewById('html/proinforupdate.html');
185 
							mui.fire(Page, 'newId', {
186 
								rd: 1
187 
							});
188 
						} else if(headFlag == 4) {
189 
							var Page = plus.webview.getWebviewById('html/researcher.html');
190 
							mui.fire(Page, 'newId', {
191 
								rd: 1
192 
							});
193 
						}
194 
						var Pa = plus.webview.getWebviewById('html/myaccount.html');
195 
						mui.fire(Pa, 'photoUser');
196 
					} else if(flag == 1) {
197 
						if(resouFlag == 0) {
198 
							var Page = plus.webview.getWebviewById('html/proinforupdate.html');
199 
							mui.fire(Page, 'newId', {
200 
								rd: 1
201 
							});
202 
						} else if(resouFlag == 1) {
203 
							var Page = plus.webview.getWebviewById('html/companyUpdata.html');
204 
							mui.fire(Page, 'newId', {
205 
								rd: 1
206 
							});
207 
						} else if(resouFlag == 2) {
208 
							var Page = plus.webview.getWebviewById('html/studentUpdata.html');
209 
							mui.fire(Page, 'newId', {
210 
								rd: 1
211 
							});
212 
						}
212 
						}
213 
						var ifllimg = plus.webview.getWebviewById('../html/fillinfo.html');
214 
						mui.fire(ifllimg, 'showimg');
215 
						mui.currentWebview.close();
216 
						mui.back();
217 
					} else {
218 
						plus.nativeUI.toast("图片上传失败", toastStyle);
219
213 
						var Pa = plus.webview.getWebviewById('resinforupdate.html');
214 
						mui.fire(Pa, 'resourceMess');
220 
					}
215 
					}
221
222 
				},
223 
				error: function(data) {
224 
					plus.nativeUI.toast("服务器链接超时", toastStyle);
216 
					var ifllimg = plus.webview.getWebviewById('../html/fillinfo.html');
217 
					mui.fire(ifllimg, 'showimg');
218 
					mui.currentWebview.close();
219 
					mui.back();
220 
				} else {
221 
					plus.nativeUI.toast("图片上传失败", toastStyle);
222
225 
				}
223 
				}
226 
			});
227
228 
		})
224
225 
			},
226 
			error: function(data) {
227 
				plus.nativeUI.toast("服务器链接超时", toastStyle);
228 
			}
229 
		});
230
229 
	})
231 
	})
230 
})
 232 
})