|
@ -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>
|