在使用APICloud進(jìn)行開發(fā)時(shí)，我們有時(shí)會(huì)需要調(diào)用拍照功能，并且需要在定義相機(jī)UI界面，此時(shí)我們就需要想辦法怎樣能夠?qū)崿F(xiàn)，在云控項(xiàng)目中我們需要在身份認(rèn)證時(shí)，進(jìn)行身份證認(rèn)證的時(shí)候調(diào)用相機(jī)功能并且在相機(jī)界面上加上我們需要的UI元素，我們可以使用FNPhotograph模塊來實(shí)現(xiàn)我們想要的效果。
實(shí)現(xiàn)思路：
1.打開相機(jī)界面
2.一個(gè)自定義UI的frame頁(yè)面，背景透明，顯示在相機(jī)頁(yè)面上面
3.自定義frame層會(huì)擋住底部相機(jī)頁(yè)面（導(dǎo)致點(diǎn)擊、聚焦等功能沒法實(shí)現(xiàn)）
4.在自定義UI頁(yè)面上使用execScript調(diào)用相機(jī)頁(yè)面的方法
1.相機(jī)頁(yè)面：
apiready = function(){
// 監(jiān)聽手機(jī)home鍵
api.addEventListener({
name: 'resume'
}, function(ret, err) {
// alert('按了Home鍵');
// 重新打開相機(jī)
test_closeCamera();
if(flag==0){
test_openCameraView();
}else if(flag==1){
test_openCameraView2();
}else {
console.log('123');
}
});
};
// 2.openCameraView:打開純相機(jī)頁(yè)面(正面)
function test_openCameraView(){
flag=0;
// console.log(flag);
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.openCameraView({
rect: {
x: 0,
y: 0,
w: api.frameWidth,
h: api.frameHeight
},
orientation: 'portrait',
fixedOn: api.frameName,
fixed: true
}, function(ret){
window_idcard1();
// 1.拍照后
// if (ret && ret.eventType == 'takePhoto') {
// FNPhotograph.close();
// api.closeFrame({
// name: 'window_idcard.html'
// });
// alert('拍照成功，關(guān)閉當(dāng)前相機(jī)');
// }
});
}
// 2.openCameraView:打開純相機(jī)頁(yè)面(反面)
function test_openCameraView2(){
flag=1;
// console.log(flag);
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.openCameraView({
rect: {
x: 0,
y: 0,
w: api.frameWidth,
h: api.frameHeight
},
orientation: 'portrait',
fixedOn: api.frameName,
fixed: true
}, function(ret){
window_idcard2();
});
}
// 拍照
function test_take(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.takePhoto({
quality: 'high',
path: 'fs://FNPhotograph/01.png',
album: true
}, function(ret){
alert("拍照成功");
});
}
// 對(duì)焦
function test_focus(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.setFocusMode({
focusMode: 'continue'
});
test_focusBox();
test_focusRegion();
}
// 對(duì)焦提示框
function test_focusBox(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.setFocusBox({
box: {
width: 1,
color: '#ff0',
maxSize: 100,
minSize: 60
}
});
}
// 對(duì)焦焦點(diǎn)
function test_focusRegion(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.setFocusRegion({
region: {
x: api.frameWidth/2,
y: api.frameHeight/2.1,
w: 60,
h: 60
},
animation :true
});
// alert('對(duì)焦區(qū)域');
}
// 關(guān)閉相機(jī)(正面)
function test_closeCamera(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.closeCameraView(
function(ret) {
api.closeFrame({
name: 'frame_idcard1.html'
});
FNPhotograph.close();
// alert('關(guān)閉相機(jī)');
});
}
// 關(guān)閉相機(jī)(正面)
function test_closeCamera(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.closeCameraView(
function(ret) {
api.closeFrame({
name: 'frame_idcard1.html'
});
api.closeFrame({
name: 'frame_idcard2.html'
});
FNPhotograph.close();
// alert('關(guān)閉相機(jī)');
});
}
// 身份證認(rèn)證遮蓋層（正面）
function window_idcard1(){
api.openFrame({
name : 'frame_idcard1.html',
url : './frame_idcard1.html',
rect : {
x : 0,
y : 0,
w : 'auto',
h : 'auto'
},
bounces : false,
bgColor : 'transparent',
vScrollBarEnabled : true,
hScrollBarEnabled : true
});
}
// 身份證認(rèn)證遮蓋層(反面)
function window_idcard2(){
api.openFrame({
name : 'frame_idcard2.html',
url : './frame_idcard2.html',
rect : {
x : 0,
y : 0,
w : 'auto',
h : 'auto'
},
bounces : false,
bgColor : 'transparent',
vScrollBarEnabled : true,
hScrollBarEnabled : true
});
} 2.自定義相機(jī)UI frame層
// 點(diǎn)擊拍照
function window_idcardBox(){
var jsfun = 'test_take();';
api.execScript({
name: 'root',
script: jsfun
});
}
// 點(diǎn)擊圖片聚焦
function window_frameImg(){
var jsfun = 'test_focus();';
api.execScript({
name: 'root',
script: jsfun
});
}
// 關(guān)閉相機(jī)
function window_close(){
var jsfun = 'test_closeCamera();';
api.execScript({
name: 'root',
script: jsfun
});
}
