Browse Source

头像上传

xuchunyang 8 years ago
parent
commit
ee171df68d
2 changed files with 2 additions and 132 deletions
  1. 1 131
      app/html/picture-upload.html
  2. 1 1
      app/js/public/upload-avatar.js

+ 1 - 131
app/html/picture-upload.html

@ -33,136 +33,6 @@
33 33
	</div>
34 34
	<script src="../js/public/mui.min.js"></script>
35 35
	<script src="../js/public/base.js"></script>
36
	<script type="text/javascript">
37
	mui.plusReady(function(){
38
		var img_obj = document.querySelector("#canvas_img");
39
		var canvas_ok = document.querySelector("#canvas_ok");
40
		var list = plus.webview.currentWebview();
41
		var userId = plus.storage.getItem('userid');
42
        img_obj.setAttribute("src",list.imgurl);
43
        canvas_ok.addEventListener("tap",function(){
44
        	 save_img();
45
        	 imgOk = document.querySelector("#img_base64").value;
46
        	 imgfh = document.querySelector("#imgfh").value;
47
        	 console.log(imgfh)
48
        	 mui.ajax(baseUrl + '/ajax/image/saveHead', {
49
				data: {
50
					"id": userId,
51
					"base64": imgOk,
52
				},
53
				dataType: 'json', //数据格式类型
54
				type: 'post', //http请求类型
55
				timeout: 10000,
56
				success: function(data) {
57
					console.log(JSON.stringify(data));
58
					console.log(data.success);
59
					plus.nativeUI.toast("图片上传成功", toastStyle); 
60
					mui.currentWebview.close();
61
				    mui.back();
62
				    var fPage = plus.webview.getWebviewById('../html/fillinfo.html');
63
				    mui.fire(fPage, 'closePage', {
64
						id:imgfh
65
					});
66
				},
67
				error: function(data) {
68
					plus.nativeUI.toast("服务器链接超时", toastStyle);
69
				}
70
			});
71
       
72
        })
73
	})
74
</script>
75
  <script>
76
        //获取手机屏幕宽高
77
        var c_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
78
        var c_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
79
        
80
        var can_obj = document.querySelector("#canvas");
81
        var img_obj = document.querySelector("#canvas_img");
82
        var div_obj = document.querySelector("#canvas_div");
83
        
84
        var posX = 0,posY = 0;//相对坐标
85
        var scale = 0;//记录在缩放动作执行前的 缩放值
86
        var start_X1=0,start_Y1=0,start_X2=0,start_Y2=0;
87
        var start_sqrt =0;//开始缩放比例
88
        var sqrt = 1;
89
        var left_x = 0,left_y = 0;//计算 偏移量 设置画布中的X,Y轴 (加偏移量)
90
        function load(){ 
91
            //设置canvas 宽度(全屏显示),高度,上下居中显示
92
            can_obj.width = c_w -50;
93
            can_obj.height = c_w -50;
94
            can_obj.style.top = (c_h - c_w - 2) / 2 + "px";
95
           // can_obj.style.left ="25px";
96
            
97
            //设置图片自适应大小及图片的居中显示
98
          // autoResizeImage(c_w,c_h,img_obj);
99
           // img_obj.style.top = (c_h - img_obj.height - 2) / 2 + "px";
100
            //img_obj.style.left = (c_w - img_obj.width) / 2 + "px";
101
            
102
            document.querySelector("#canvas_div").addEventListener('touchstart',touch, false);
103
            document.querySelector("#canvas_div").addEventListener('touchmove',touch, false);
104
            document.querySelector("#canvas_div").addEventListener('touchend',touch, false);
105
            
106
            var ctx_img = can_obj.getContext("2d");
107
            var ctx_X = (can_obj.width - img_obj.width) /2,ctx_Y = (can_obj.height - img_obj.height) /2;
108
            ctx_img.drawImage(img_obj,ctx_X,ctx_Y,img_obj.width,img_obj.height);//初始化 canvas 加入图片
109
            
110
            function touch (event){
111
                 var event = event || window.event;
112
                 event.preventDefault();//阻止浏览器或body 其他冒泡事件
113
                 var mv_x1 = event.changedTouches[0].clientX,
114
                	 mv_y1 = event.changedTouches[0].clientY;//手指坐标
115
                 var img_left = img_obj.left,img_top = img_obj.top;//图片坐标
116
                 if(event.touches.length == 1){//单指操作
117
                    if(event.type == "touchstart"){//开始移动
118
                        posX = mv_x1 - img_obj.offsetLeft; //获取img相对坐标
119
                        posY = mv_y1 - img_obj.offsetTop;
120
                    }else if(event.type == "touchmove"){//移动中
121
                        var _x = mv_x1 - posX; //移动坐标
122
                        var _y = mv_y1 - posY;
123
                        img_obj.style.left = _x + "px";
124
                        img_obj.style.top = _y + "px";
125
                        ctx_img.clearRect(0,0,can_obj.width,can_obj.height);//清除画布
126
                        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);//画布内图片移动
127
                    }
128
                 }else if(event.touches.length == 2){//双指操作
129
                     if(event.type == "touchstart"){
130
                         scale = img_obj.style.Transform == undefined ? 1 : parseFloat(img_obj.style.Transform.replace(/[^0-9^\.]/g,""));//获取在手指按下瞬间的放大缩小值(scale),作用,在移动时,记录上次移动的放大缩小值
131
                         start_X1 = event.touches[0].clientX;//记录开始的坐标值,作用:在下次放大缩小后,去掉上次放大或缩小的值
132
                         start_Y1 = event.touches[0].clientY;
133
                         start_X2 = event.touches[1].clientX;
134
                         start_Y2 = event.touches[1].clientY;
135
                         start_sqrt = Math.sqrt((start_X2 - start_X1) * (start_X2 - start_X1) + (start_Y2 - start_Y1) * (start_Y2 - start_Y1)) / 200;//获取在缩放时 当前缩放的值
136
                         
137
                     }else if(event.type == "touchmove"){
138
                         var mv_x2 = event.touches[1].clientX,mv_y2 = event.touches[1].clientY;
139
                         var move_sqrt = Math.sqrt((mv_x2 - mv_x1) * (mv_x2 - mv_x1) + (mv_y2 - mv_y1) * (mv_y2 - mv_y1)) / 200;//动态获取上一次缩放值(随时变更),在下次缩放时减去上一次的值,作用:防止累加之前的缩放
140
                         sqrt = move_sqrt - start_sqrt + scale;//求出缩放值
141
                         
142
                         img_obj.style.webkitTransform = "scale("+ sqrt +")";//设置放大缩小
143
                         img_obj.style.Transform = "scale("+ sqrt +")";
144
                         ctx_img.clearRect(0,0,can_obj.width,can_obj.height);//清除画布
145
                         var dImg_left = parseFloat(img_obj.style.left.replace("px","")),dImg_top = parseFloat(img_obj.style.top.replace("px",""));
146
                         var w = img_obj.width,h = img_obj.height,sw = w * sqrt, sh = h * sqrt;
147
                         left_x = w - sw;//计算 偏移量 设置画布中的X,Y轴 (加偏移量) 注:canvas 原点放大(canvas中图片左上角坐标),css3 scale 中点放大
148
                         left_y = h - sh;
149
                         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);//画布内图片重置
150
                     }
151
                 }
152
            }
153
        }
154
        
155
        window.addEventListener('load',load, false);
156
        
157
        //裁图
158
        function save_img(){
159
            var base64 = can_obj.toDataURL("image/jpeg",1);
160
            var subbase = base64.substring(22);
161
            document.querySelector("#img_base64").value = subbase;
162
            document.querySelector("#imgfh").value = base64; 
163
        }
164
        
165
      
166
   </script>
36
	<script src="../js/picture-upload.js"></script>
167 37
</body>
168 38
</html>

+ 1 - 1
app/js/public/upload-avatar.js

@ -5,7 +5,7 @@ window.addEventListener('closePage', function(event) {
5 5
	bimg = event.detail.id;
6 6
	var imgvar='<img src="'+bimg+'" style="width:100%"/>';  
7 7
	userimg.innerHTML=imgvar;
8
});		
8
});
9 9

10 10
mui.plusReady(function() {
11 11