Browse Source

头像上传

xuchunyang 8 years ago
parent
commit
e040ad7422
1 changed files with 139 additions and 0 deletions
  1. 139 0
      app/js/picture-upload.js

+ 139 - 0
app/js/picture-upload.js

@ -0,0 +1,139 @@
1
mui.plusReady(function() {
2
	var img_obj = document.querySelector("#canvas_img");
3
	var canvas_ok = document.querySelector("#canvas_ok");
4
	var list = plus.webview.currentWebview();
5
	var userId = plus.storage.getItem('userid');
6
	img_obj.setAttribute("src", list.imgurl);
7
	canvas_ok.addEventListener("tap", function() {
8
		save_img();
9
		imgOk = document.querySelector("#img_base64").value;
10
		imgfh = document.querySelector("#imgfh").value;
11
		console.log(imgfh)
12
		mui.ajax(baseUrl + '/ajax/image/saveHead', {
13
			data: {
14
				"id": userId,
15
				"base64": imgOk,
16
			},
17
			dataType: 'json', //数据格式类型
18
			type: 'post', //http请求类型
19
			timeout: 10000,
20
			success: function(data) {
21
				console.log(JSON.stringify(data));
22
				console.log(data.success);
23
				plus.nativeUI.toast("图片上传成功", toastStyle);
24
				mui.currentWebview.close();
25
				mui.back();
26
				var fPage = plus.webview.getWebviewById('../html/fillinfo.html');
27
				mui.fire(fPage, 'closePage', {
28
					id: imgfh
29
				});
30
			},
31
			error: function(data) {
32
				plus.nativeUI.toast("服务器链接超时", toastStyle);
33
			}
34
		});
35

36
	})
37
})
38

39

40
//获取手机屏幕宽高
41
var c_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
42
var c_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
43

44
var can_obj = document.querySelector("#canvas");
45
var img_obj = document.querySelector("#canvas_img");
46
var div_obj = document.querySelector("#canvas_div");
47

48
var posX = 0,
49
	posY = 0; //相对坐标
50
var scale = 0; //记录在缩放动作执行前的 缩放值
51
var start_X1 = 0,
52
	start_Y1 = 0,
53
	start_X2 = 0,
54
	start_Y2 = 0;
55
var start_sqrt = 0; //开始缩放比例
56
var sqrt = 1;
57
var left_x = 0,
58
	left_y = 0; //计算 偏移量 设置画布中的X,Y轴 (加偏移量)
59
function load() {
60
	//设置canvas 宽度(全屏显示),高度,上下居中显示
61
	can_obj.width = c_w - 50;
62
	can_obj.height = c_w - 50;
63
	can_obj.style.top = (c_h - c_w - 2) / 2 + "px";
64
	// can_obj.style.left ="25px";
65

66
	//设置图片自适应大小及图片的居中显示
67
	// autoResizeImage(c_w,c_h,img_obj);
68
	// img_obj.style.top = (c_h - img_obj.height - 2) / 2 + "px";
69
	//img_obj.style.left = (c_w - img_obj.width) / 2 + "px";
70

71
	document.querySelector("#canvas_div").addEventListener('touchstart', touch, false);
72
	document.querySelector("#canvas_div").addEventListener('touchmove', touch, false);
73
	document.querySelector("#canvas_div").addEventListener('touchend', touch, false);
74

75
	var ctx_img = can_obj.getContext("2d");
76
	var ctx_X = (can_obj.width - img_obj.width) / 2,
77
		ctx_Y = (can_obj.height - img_obj.height) / 2;
78
	ctx_img.drawImage(img_obj, ctx_X, ctx_Y, img_obj.width, img_obj.height); //初始化 canvas 加入图片
79

80
	function touch(event) {
81
		var event = event || window.event;
82
		event.preventDefault(); //阻止浏览器或body 其他冒泡事件
83
		var mv_x1 = event.changedTouches[0].clientX,
84
			mv_y1 = event.changedTouches[0].clientY; //手指坐标
85
		var img_left = img_obj.left,
86
			img_top = img_obj.top; //图片坐标
87
		if(event.touches.length == 1) { //单指操作
88
			if(event.type == "touchstart") { //开始移动
89
				posX = mv_x1 - img_obj.offsetLeft; //获取img相对坐标
90
				posY = mv_y1 - img_obj.offsetTop;
91
			} else if(event.type == "touchmove") { //移动中
92
				var _x = mv_x1 - posX; //移动坐标
93
				var _y = mv_y1 - posY;
94
				img_obj.style.left = _x + "px";
95
				img_obj.style.top = _y + "px";
96
				ctx_img.clearRect(0, 0, can_obj.width, can_obj.height); //清除画布
97
				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); //画布内图片移动
98
			}
99
		} else if(event.touches.length == 2) { //双指操作
100
			if(event.type == "touchstart") {
101
				scale = img_obj.style.Transform == undefined ? 1 : parseFloat(img_obj.style.Transform.replace(/[^0-9^\.]/g, "")); //获取在手指按下瞬间的放大缩小值(scale),作用,在移动时,记录上次移动的放大缩小值
102
				start_X1 = event.touches[0].clientX; //记录开始的坐标值,作用:在下次放大缩小后,去掉上次放大或缩小的值
103
				start_Y1 = event.touches[0].clientY;
104
				start_X2 = event.touches[1].clientX;
105
				start_Y2 = event.touches[1].clientY;
106
				start_sqrt = Math.sqrt((start_X2 - start_X1) * (start_X2 - start_X1) + (start_Y2 - start_Y1) * (start_Y2 - start_Y1)) / 200; //获取在缩放时 当前缩放的值
107

108
			} else if(event.type == "touchmove") {
109
				var mv_x2 = event.touches[1].clientX,
110
					mv_y2 = event.touches[1].clientY;
111
				var move_sqrt = Math.sqrt((mv_x2 - mv_x1) * (mv_x2 - mv_x1) + (mv_y2 - mv_y1) * (mv_y2 - mv_y1)) / 200; //动态获取上一次缩放值(随时变更),在下次缩放时减去上一次的值,作用:防止累加之前的缩放
112
				sqrt = move_sqrt - start_sqrt + scale; //求出缩放值
113

114
				img_obj.style.webkitTransform = "scale(" + sqrt + ")"; //设置放大缩小
115
				img_obj.style.Transform = "scale(" + sqrt + ")";
116
				ctx_img.clearRect(0, 0, can_obj.width, can_obj.height); //清除画布
117
				var dImg_left = parseFloat(img_obj.style.left.replace("px", "")),
118
					dImg_top = parseFloat(img_obj.style.top.replace("px", ""));
119
				var w = img_obj.width,
120
					h = img_obj.height,
121
					sw = w * sqrt,
122
					sh = h * sqrt;
123
				left_x = w - sw; //计算 偏移量 设置画布中的X,Y轴 (加偏移量) 注:canvas 原点放大(canvas中图片左上角坐标),css3 scale 中点放大
124
				left_y = h - sh;
125
				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); //画布内图片重置
126
			}
127
		}
128
	}
129
}
130

131
window.addEventListener('load', load, false);
132

133
//裁图
134
function save_img() {
135
	var base64 = can_obj.toDataURL("image/jpeg", 1);
136
	var subbase = base64.substring(22);
137
	document.querySelector("#img_base64").value = subbase;
138
	document.querySelector("#imgfh").value = base64;
139
}