fnImageClip.html
2.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>图片裁剪</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
body{
}
</style>
</head>
<body>
<header class="aui-header-bar" style="padding-top:30px;">
<div class="aui-header-left" tapmode onclick="api.closeWin();FNImageClip.close();">
<i class="aui-iconfont aui-icon-left"></i>返回
</div>
<div class="aui-title">头像</div>
<div class="aui-header-right" tapmode onclick="saveImg();">
确认<i class="aui-iconfont aui-icon-right"></i>
</div>
</header>
<footer></footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
var FNImageClip = null;
apiready = function(){
var header = $api.dom('header'); // 获取 header 标签元素
var footer = $api.dom('footer'); // 获取 footer 标签元素
var headerH = $api.fixStatusBar(header);
var footerH = $api.fixTabBar(footer);
api.parseTapmode();
FNImageClip = api.require('FNImageClip');
openClip(headerH);
};
function openClip(headerH) {
FNImageClip.open({
rect: {
x: 0,
y: headerH,
w: api.winWidth,
h: api.winHeight-headerH
},
isHideGrid: true,
srcPath: api.pageParam.imgSrc,
style: {
mask: 'rgba(0, 0, 0,0.5)',
clip: {
w: api.winWidth,
h: api.winWidth,
x: 0,
y: api.winWidth/2,
borderColor: '#0f0',
// borderWidth: 1,
appearance: 'rectangle'
}
},
mode: 'image',
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
// console.log(JSON.stringify(ret));
} else {
// alert(JSON.stringify(err));
}
});
}
function saveImg() {
FNImageClip.save({
destPath: 'fs://imageClip/tempAvatar.png',
copyToAlbum: false,
quality: 1
}, function(ret, err) {
if (ret) {
if (ret.destPath) {
api.sendEvent({
name: 'changeAvatar',
extra: {
destPath: ret.destPath
}
});
FNImageClip.close();
api.closeWin();
}else {
api.toast({
msg: '操作失败',
duration: 2000,
location: 'bottom'
});
}
} else {
alert(JSON.stringify(err));
}
});
}
</script>
</html>