ionic 調用硬件設備

Ionic 調用硬件的能力。
   Ionic 調用原生 api 的能力是基於 cordova 的 ，cordova 是 Adobe 公司的一個開源的框架， 誕生於2008年，
   可以讓我們用javascript調用手機原生的幾乎所有的api，比如:攝像頭、 麥克風等、重力感應、加速器、聲音、震動、
   網絡、視頻、音頻、地理定位等，原生能實現 的所有功能。


Ionic 調用 Device 設備 Api 獲取手機的設備信息。
  https://wenku.baidu.com/view/91a10d55ba68a98271fe910ef12d2af90242a8ec
  1. 找到對應的Api: https://ionicframework.com/docs/native/device/
  2. 安裝相關的設備插件
     ionic cordova plugin add cordova-plugin-device
     npm install --save @ionic-native/device
  3. 在app.module.ts中引入註冊相應模塊
     import { Device } from '@ionic-native/device';
     providers: [
         StatusBar,
         SplashScreen,
         Device,
         {provide: ErrorHandler, useClass: IonicErrorHandler}
     ]

  4，在用到的頁面引入看文檔使用
    ionic cordova plugin add cordova-plugin-device
    npm install --save @ionic-native/device


    import { Device } from '@ionic-native/device';
    constructor(private device: Device) { }
    ...
    console.log('Device UUID is: ' + this.device.uuid);


 Ionic 調用照相機拍照功能
   1、找到對應的 Api: https://ionicframework.com/docs/native/camera/
   2、安裝相關的插件
      ionic cordova plugin add cordova-plugin-camera
      npm install --save @ionic-native/camera
   3、在 app.module.ts 中引入註冊相應模塊
      import { Camera } from '@ionic-native/camera';
      ...
      @NgModule({ ...
        providers: [ ...
         Camera
        ... ]
        ...
       })
      export class AppModule { }
   4、在用到的頁面引入看文檔使用
     import { Camera, CameraOptions } from '@ionic-native/camera';

     constructor(private camera: Camera) { }
       ...
      const options: CameraOptions = {
          quality: 100,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
       }

      this.camera.getPicture(options).then((imageData) => {
       // imageData is either a base64 encoded string or a file URI // If it's base64:
       let base64Image = 'data:image/jpeg;base64,' + imageData;
       }, (err) => {
      });



Ionic ZBar 掃描二維碼 條形碼插件的使用
   https://wenku.baidu.com/view/872cd948876fb84ae45c3b3567ec102de2bddfe8
   1. 下載安裝插件
       ionic cordova plugin add cordova-plugin-cszbar
       npm install --save @ionic-native/zbar
   2. app.module.ts 引入依賴注入
       import { ZBar } from '@ionic-native/zbar';
       providers: [
           Camera,
           StatusBar,
           SplashScreen,
           ZBar,
          {provide: ErrorHandler, useClass: IonicErrorHandler}
       ]
   3. 用到的地方引入，注入使用，注意:如果返回的是對象，用JSON.stringify轉換後打印
      import { ZBar, ZBarOptions } from '@ionic-native/zbar';
      doScanner(){
        let options: ZBarOptions = {
        text_title: "掃碼", // Android only
        text_instructions: "請把相機對準二維碼", // Android only camera: "back", // defaults to "back"
         flash: "auto", // defaults to "auto". See Quirks drawSight: true
       };
       this.zbar.scan(options)
        .then(result => {
            alert(JSON.stringify(result)); // Scanned code
        })
        .catch(error => {
           console.log(error); // Error message
        });
      }



Ionic圖片上傳(使用cordova-plugin-file-transfer 實現 圖片上傳)
   1. 下載安裝插件
     ionic cordova plugin add cordova-plugin-file
     npm install --save @ionic-native/file
     ionic cordova plugin add cordova-plugin-file-transfer
     npm install --save @ionic-native/file-transfer
     或者通過直接安裝
      ionic cordova plugin add cordova-plugin-file-transfer
      npm install --save @ionic-native/file-transfer
   2. app.module.ts 引入依賴注入
      import { File } from '@ionic-native/file';
      import { FileTransfer} from '@ionic-native/file-transfer';

      providers: [
         StatusBar,
         SplashScreen,
         File,
         FileTransfer,
         Device,
         Camera,
         {provide: ErrorHandler, useClass: IonicErrorHandler}
      ]
   3. 用到的地方引入 實例化
      import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
      import { File } from '@ionic-native/file';

      constructor(public navCtrl: NavController,private device: Device, private camera: Camera,private transfer: FileTransfer, private file: File)
      {

      }
   4，拍照上傳圖片功能
      doCameraUpload(){
        const options: CameraOptions = {
          quality: 100, //圖片質量
          destinationType: this.camera.DestinationType.FILE_URI, /*返回的類型*/
          encodingType: this.camera.EncodingType.JPEG, sourceType:this.camera.PictureSourceType.CAMERA, // mediaType: this.camera.MediaType.PICTURE, allowEdit:true,
          targetWidth:300, /*寬度高度要設置*/
          targetHeight:300
        }
        this.camera.getPicture(options).then((imageData) => { // 返回拍照的地址
          this.doUpload(imageData); }, (err) => {
          // Handle error
        });
      }
      doUpload(src){
        const fileTransfer: FileTransferObject = this.transfer.create();
        let options: FileUploadOptions = { fileKey: 'file',
          fileName: 'name.jpg', mimeType:'image/jpeg', httpMethod:"POST",
          params:{
            username : "張三", age : "20", height : "190"
          } /*附帶的一些信息*/
          // headers: {}
        }
        // error
        alert('err');
        alert(JSON.stringify(err)); })
      }