cordova-plugin-camera-preview插件的安装与使用，解决toBack不起作用的问题

cordova-plugin-camera-preview插件的安装与使用，解决toBack不起作用的问题

开始使用时，toBack设置并非不起作用，设置为true时，相机预览画面确实已经有了，只不过预览框被页面中的其它元素者挡在了后面而已。注意在步骤2与步骤3中的解决方法。

一、插件安装

cordova plugin add cordova-plugin-camera-preview
npm install @ionic-native/camera-preview

二、插件使用

项目使用了ionic 3.x，在3.x与4.x版本中使用略有差别，先介绍ionic3.x中的使用方法。
使用tabs布局，tab-1、 tab2、tab3、tab4.

1. 在tab4中使用插件，在tab4.ts文件中

1） 引入插件

  import { CameraPreview, CameraPreviewOptions } from '@ionic-native/camera-preview';

2） 实例化

construtor(public cameraPreview: CameraPreivew){  ...... }
...
startCam(){
   var options = {
       x:0,
       y:0,
       width: window.screen.width*0.5,
       height: window.screen.height * 0.5,
       camera: this.cameraPreview.CAMERA_DIRECTION.BACK,
       toBack: true,
       tapPhoto: true,
       previewDrag: false
   }
   this.cameraPreview.startCamera(options).then();
}

2. 在src/theme/variables.scss文件最后

$background-color: transparent;

3. 如果仅仅是在tab4页面中使用此插件，而在其它页面不显示，需设置其它（tab1、tab2、tab3）页面的scss文件，使其它页面的背景颜色设置为白色，如tab1.scss

page-tab1{
   background-color: #fff
};

---------- 以上已经可以解决问题了，也可在此基础上进行优化 ---------

前面所述的步骤1、步骤2都不变，步骤3、4如下

3. 在src/app/app.scss文件中

ion-content:not(.background-color-transparent){
   background-color:#fff !important
}

4. 在所需设置相机预览页面的html文件中，设置类名即可

<ion-content class="background-color-transparent" > 
......
<ion-content/>

效果如下：