Accueil Explorer Aide
S'inscrire Connexion
bulomakaka
/
ekexiu.app
Suivre 2
Voter 1
Fork 0
Code Tickets 0 Pull Requests 0 Commits 363 Publications 0 Wiki
Parcourir la Source

修改ios拍照问题

xuchunyang 8 ans auparavant
Parent
906c0cfd50
commit
f56c223f6c
1 fichiers modifiés avec 218 ajouts et 217 suppressions
Vue séparée Afficher les stats Diff
  1. 218 217
      app/js/picture-upload.js

+ 218 - 217
app/js/picture-upload.js
Voir le fichier 

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