在使用APICloud進(jìn)行開發(fā)時，我們有時會需要調(diào)用拍照功能，并且需要在定義相機(jī)UI界面，此時我們就需要想辦法怎樣能夠?qū)崿F(xiàn)，在云控項目中我們需要在身份認(rèn)證時，進(jìn)行身份證認(rèn)證的時候調(diào)用相機(jī)功能并且在相機(jī)界面上加上我們需要的UI元素，我們可以使用FNPhotograph模塊來實現(xiàn)我們想要的效果。
實現(xiàn)思路：
1.打開相機(jī)界面
2.一個自定義UI的frame頁面，背景透明，顯示在相機(jī)頁面上面
3.自定義frame層會擋住底部相機(jī)頁面（導(dǎo)致點擊、聚焦等功能沒法實現(xiàn)）
4.在自定義UI頁面上使用execScript調(diào)用相機(jī)頁面的方法
1.相機(jī)頁面：
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ī)頁面(正面)
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ī)頁面(反面)
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("拍照成功");
});
}
// 對焦
function test_focus(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.setFocusMode({
focusMode: 'continue'
});
test_focusBox();
test_focusRegion();
}
// 對焦提示框
function test_focusBox(){
var FNPhotograph = api.require('FNPhotograph');
FNPhotograph.setFocusBox({
box: {
width: 1,
color: '#ff0',
maxSize: 100,
minSize: 60
}
});
}
// 對焦焦點
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('對焦區(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層
// 點擊拍照
function window_idcardBox(){
var jsfun = 'test_take();';
api.execScript({
name: 'root',
script: jsfun
});
}
// 點擊圖片聚焦
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
});
}
