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