在使用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頁面，背景透明，顯示在相機(jī)頁面上面  

                      3.自定義frame層會(huì)擋住底部相機(jī)頁面（導(dǎo)致點(diǎn)擊、聚焦等功能沒法實(shí)現(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("拍照成功");
          });
      }

      // 對(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
        });
      }