Home Explore Help
Register Sign In
bulomakaka
/
ekexiu.app
Watch 2
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Commits 118 Releases 0 Wiki
Browse Source

头像上传，判断图片方向

xuchunyang 8 years ago
parent
0dc2b31556
commit
642229ca4b
2 changed files with 136 additions and 26 deletions
Split View Show Diff Stats
  1. 3 3
      app/html/picture-upload.html
  2. 133 23
      app/js/picture-upload.js

+ 3 - 3
app/html/picture-upload.html
View File 

@ -10,7 +10,7 @@
10 10 
    body,html{background-color:#000;position:relative;width:100%;height:100%;overflow: hidden;}
11 11 
    .canvas_img,.canvas,.canvas_div,.canvas_btn,.canvas_bg{position: absolute;}
12 12 
    .canvas_div,.canvas_bg{left:0;top:0;bottom:0;right:0;}
13 
    .canvas_img{z-index:1;width:100%; top:0;}
13 
    .canvas_img{z-index:1;}
14 14 
    .canvas_bg{background-color: rgba(0,0,0,.6);z-index:2;}
15 15 
    .canvas{left:25px ;border:1px solid #fff;top:30px;z-index:100; }
16 16 
    .canvas_div{z-index:999;}

@ -21,9 +21,8 @@
21 21 
</style>
22 22 
</head>
23 23 
<body>
24 
	<input type="hidden" name="imgfh" id="imgfh" value="" />
25 24 
	<input type="hidden" name="img_base64" id="img_base64" value="" />
26 
	<img id="canvas_img" src="" class="canvas_img"/>
25 
	<img id="canvas_img" src="" class="canvas_img" />
27 26 
	<div class="canvas_bg"></div>
28 27 
	<canvas id="canvas" class="canvas"></canvas>
29 28 
	<div id="canvas_div" class="canvas_div"></div>

@ -33,6 +32,7 @@
33 32 
	</div>
34 33 
	<script src="../js/public/mui.min.js"></script>
35 34 
	<script src="../js/public/base.js"></script>
35 
		<script src="../js/public/exif.js"></script>
36 36 
	<script src="../js/picture-upload.js"></script>
37 37 
</body>
38 38 
</html>

+ 133 - 23
app/js/picture-upload.js
View File 

@ -3,12 +3,13 @@ mui.plusReady(function() {
3 3 
	var canvas_ok = document.querySelector("#canvas_ok");
4 4 
	var list = plus.webview.currentWebview();
5 5 
	var userId = plus.storage.getItem('userid');
6 
	var Orientation;
6 7 
	img_obj.setAttribute("src", list.imgurl);
8
7 9 
	canvas_ok.addEventListener("tap", function() {
8 10 
		save_img();
9 11 
		imgOk = document.querySelector("#img_base64").value;
10 
		imgfh = document.querySelector("#imgfh").value;
11 
		console.log(imgfh)
12 
		console.log(imgOk)
12 13 
		mui.ajax(baseUrl + '/ajax/image/saveHead', {
13 14 
			data: {
14 15 
				"id": userId,

@ -30,12 +31,10 @@ mui.plusReady(function() {
30 31 
						mui.fire(Page, 'newId');
31 32 
						var Pa = plus.webview.getWebviewById('html/myaccount.html');
32 33 
						mui.fire(Pa, 'photoUser');
33
34
34 35 
					} else {
35 36 
						var fPage = plus.webview.getWebviewById('../html/fillinfo.html');
36 
						mui.fire(fPage, 'closePage', {
37 
							id: imgfh
38 
						});
37 
						mui.fire(fPage, 'closePage');
39 38 
					}
40 39 
				} else {
41 40 
					plus.nativeUI.toast("图片上传失败", toastStyle);

@ -49,6 +48,7 @@ mui.plusReady(function() {
49 48 
		});
50 49
51 50 
	})
51
52 52 
})
53 53
54 54 
//获取手机屏幕宽高

@ -70,7 +70,33 @@ var start_sqrt = 0; //开始缩放比例
70 70 
var sqrt = 1;
71 71 
var left_x = 0,
72 72 
	left_y = 0; //计算 偏移量 设置画布中的X，Y轴 (加偏移量)
73
74 
img_obj.onload = function() {
75
76 
	EXIF.getData(img_obj, function() {
77 
		//alert(EXIF.pretty(this));
78 
		EXIF.getAllTags(this);
79 
		//alert(EXIF.getTag(this, 'Orientation'));
80 
		Orientation = EXIF.getTag(this, 'Orientation');
81 
		//return;
82 
		if(Orientation == 6) {
83 
			//alert('需要顺时针（向左）90度旋转');
84 
			var current = 0;
85 
			//objImg.rotate(degree);
86 
			current = (current + 90) % 360;
87 
			img_obj.style.transform = 'rotate(' + current + 'deg)';
88 
			can_obj.style.transform = 'rotate(' + current + 'deg)';
89 
		}else{
90 
			//alert('需要顺时针（向左）-90度旋转');
91 
		}
92 
	});
93
94 
	load();
95
96 
}
97
73 98 
function load() {
99
74 100 
	//设置canvas 宽度（全屏显示），高度,上下居中显示
75 101 
	can_obj.width = c_w - 50;
76 102 
	can_obj.height = c_w - 50;

@ -78,19 +104,21 @@ function load() {
78 104 
	// can_obj.style.left ="25px";
79 105
80 106 
	//设置图片自适应大小及图片的居中显示
81 
	// autoResizeImage(c_w,c_h,img_obj);
82 
	// img_obj.style.top = (c_h - img_obj.height - 2) / 2 + "px";
83 
	//img_obj.style.left = (c_w - img_obj.width) / 2 + "px";
84
107 
	autoResizeImage(c_w, c_h, img_obj);
108 
	//img_obj.width=c_w - 50;
109 
	img_obj.style.top = (c_h - img_obj.height - 50) / 2 + "px";
110 
	img_obj.style.left = (c_w - img_obj.width) / 2 + "px";
111
85 112 
	document.querySelector("#canvas_div").addEventListener('touchstart', touch, false);
86 113 
	document.querySelector("#canvas_div").addEventListener('touchmove', touch, false);
87 114 
	document.querySelector("#canvas_div").addEventListener('touchend', touch, false);
88
89 
	var ctx_img = can_obj.getContext("2d");
115 
	ctx_img = can_obj.getContext("2d");
90 116 
	var ctx_X = (can_obj.width - img_obj.width) / 2,
91 117 
		ctx_Y = (can_obj.height - img_obj.height) / 2;
92 
	ctx_img.drawImage(img_obj, ctx_X, ctx_Y, img_obj.width, img_obj.height); //初始化 canvas 加入图片
93
118
119 
	    ctx_img.drawImage(img_obj, ctx_X, ctx_Y, img_obj.width, img_obj.height); //初始化 canvas 加入图片
120
121
94 122 
	function touch(event) {
95 123 
		var event = event || window.event;
96 124 
		event.preventDefault(); //阻止浏览器或body 其他冒泡事件

@ -101,6 +129,7 @@ function load() {
101 129 
		if(event.touches.length == 1) { //单指操作
102 130 
			if(event.type == "touchstart") { //开始移动
103 131 
				posX = mv_x1 - img_obj.offsetLeft; //获取img相对坐标
132 
				//posd = mv_x1 - img_obj.offsetRight; //获取img相对坐标
104 133 
				posY = mv_y1 - img_obj.offsetTop;
105 134 
			} else if(event.type == "touchmove") { //移动中
106 135 
				var _x = mv_x1 - posX; //移动坐标

@ -108,9 +137,14 @@ function load() {
108 137 
				img_obj.style.left = _x + "px";
109 138 
				img_obj.style.top = _y + "px";
110 139 
				ctx_img.clearRect(0, 0, can_obj.width, can_obj.height); //清除画布
111 
				ctx_img.drawImage(img_obj, _x + left_x / 2 - 25, _y - parseFloat(can_obj.style.top) + left_y / 2, img_obj.width * sqrt, img_obj.height * sqrt); //画布内图片移动
140 
				console.log(Orientation);
141 
				if(Orientation == 6) {
142 
					ctx_img.drawImage(img_obj, _y - parseFloat(can_obj.style.top) + left_y-120 / 2, -(_x + left_x / 2 + 32), img_obj.width * sqrt, img_obj.height * sqrt); //画布内图片移动
143 
				} else {
144 
					ctx_img.drawImage(img_obj, _x + left_x / 2 - 25, _y - parseFloat(can_obj.style.top) + left_y / 2, img_obj.width * sqrt, img_obj.height * sqrt); //画布内图片移动
145 
				}
112 146 
			}
113 
		} else if(event.touches.length == 2) { //双指操作
147 
		} /*else if(event.touches.length == 2) { //双指操作
114 148 
			if(event.type == "touchstart") {
115 149 
				scale = img_obj.style.Transform == undefined ? 1 : parseFloat(img_obj.style.Transform.replace(/[^0-9^\.]/g, "")); //获取在手指按下瞬间的放大缩小值（scale），作用，在移动时，记录上次移动的放大缩小值
116 150 
				start_X1 = event.touches[0].clientX; //记录开始的坐标值,作用：在下次放大缩小后，去掉上次放大或缩小的值

@ -138,16 +172,92 @@ function load() {
138 172 
				left_y = h - sh;
139 173 
				ctx_img.drawImage(img_obj, dImg_left + left_x / 2 - 25, dImg_top - parseFloat(can_obj.style.top.replace("px", "")) + left_y / 2, sw, sh); //画布内图片重置
140 174 
			}
141 
		}
175 
		}*/
142 176 
	}
143 177 
}
144 178
145 
window.addEventListener('load', load, false);
179 
//window.addEventListener('load', load, false);
146 180
147 181 
//裁图
148 182 
function save_img() {
149 
	var base64 = can_obj.toDataURL("image/jpeg", 1);
150 
	var subbase = base64.substring(22);
151 
	document.querySelector("#img_base64").value = subbase;
152 
	document.querySelector("#imgfh").value = base64;
153 
}
183 
    var base64 = can_obj.toDataURL("image/jpeg", 1);
184 
    var subbase = base64.substring(22);
185 
    document.querySelector("#img_base64").value = subbase;
186 
}
187
188 
//图片自适应
189 
function autoResizeImage(maxWidth, maxHeight, objImg) {
190 
	//var img = new Image();
191 
	//img.src = objImg.src;
192 
	//var hRatio;
193 
	//var wRatio;
194 
	//var ratio = 1;
195 
	var w = objImg.width;
196 
	var h = objImg.height;
197
198 
	//alert(w);
199 
	//alert(h);
200 
	wRatio = maxWidth / w;
201 
	hRatio = maxHeight / h;
202
203 
	if(w > maxWidth) {
204 
		if(w > h) {
205 
			objImg.height = maxWidth - 50;
206 
			//alert('1')
207 
		} else {
208 
			objImg.width = c_w - 46;
209 
			//objImg.height=maxHeight;
210 
			// alert('2')
211 
		}
212 
	} else {
213 
		objImg.width = maxWidth - 50;
214 
		objImg.height = maxWidth - 50;
215 
	}
216 
	/* if(w < maxWidth && h < maxHeight){
217 
	 	objImg.width=maxWidth-50;
218 
	 	objImg.height=maxWidth-50;
219 
	 	alert('2')
220 
	 }
221 
	 if(w > maxWidth && h < maxHeight){
222 
	 	objImg.width=maxWidth-50;
223 
	 	objImg.height=maxWidth-50;
224 
	 	alert('3')
225 
	 }*/
226 
	/*if (w < maxWidth && h < maxHeight) {
227 
	      return;
228 
	      alert('1')
229 
	  }
230 
	  if (maxWidth == 0 && maxHeight == 0) {
231 
	      ratio = 1;
232 
	      alert('2')
233 
	  } else if (maxWidth == 0) {
234 
	      if (hRatio < 1) {
235 
	          ratio = hRatio;
236 
	          alert('3')
237 
	      }
238 
	  } else if (maxHeight == 0) {
239 
	      if (wRatio < 1) {
240 
	          ratio = wRatio;
241 
	          alert('4')
242 
	      }
243 
	  } else if (wRatio < 1 || hRatio < 1) {
244 
	      ratio = (wRatio <= hRatio ? wRatio : hRatio);
245 
	      alert('5')
246 
	  } else {
247 
	      ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
248 
	      alert('6')
249 
	  }
250 
	  if (ratio < 1) {
251 
	      if (ratio < 0.5 && w < maxWidth && h < maxHeight) {
252 
	          ratio = 1 - ratio;
253 
	      }
254 
	      w = w * ratio;
255 
	      h = h * ratio;
256 
	      alert('7')
257 
	      objImg.width=maxWidth-45;
258 
	  	objImg.height=maxHeight;
259 
	  }*/
260 
	// objImg.height = h+50;
261 
	//objImg.width = w;
262 
}
263