Ionic Cordova 調用原生 Api 實現拍照上傳圖片到服務器功能

時間 2019-12-01

標籤 ionic cordova 調用原生 api 實現拍照上傳圖片服務器功能欄目 Cordova 简体版

原文原文鏈接

Ionic 調用 Device 設備 Api 獲取手機的設備信息 css

1. 找到對應的Api: https://ionicframework.com/docs/native/device/ html

2. 安裝相關的設備插件 node

 ionic cordova plugin add cordova-plugin-device 
npm install --save @ionic-native/device

3. 在app.module.ts中引入註冊相應模塊 npm

import { Device } from '@ionic-native/device';

providers: [
    StatusBar,
SplashScreen,
Device,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

在用到的頁面引入看文檔使用 bootstrap

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

Ionic 調用照相機拍照功能。 api

1、找到對應的 Api: https://ionicframework.com/docs/native/camera/ 瀏覽器

2、安裝相關的插件 app

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

3、在 app.module.ts 中引入註冊相應模塊 ionic

providers: [ ...
Camera
... ]

參數 ide	類型	說明
quality	Number	保存的圖像質量，範圍爲 0 到 100
destinationType	Number	返回值格式 Camera.DestinationType.DATA_URL 返回 base64 編碼 Camera.DestinationType.FILE_URI 返回文件地址


sourceType	Number	設置圖片來源 Camera.PictureSourceType.CAMERA 攝像機獲取 Camera.PictureSourceType.PHOTOLIBRARY 圖庫選擇
allowEdit	Boolean	選擇圖片完成是否容許編輯
encodingType	Number	JPEG = 0, PNG = 1
targetWidth	Number	縮放圖像的寬度(像素)
targetHeight	Number	縮放圖像的高度(像素)
mediaType	String	設置媒體的類型
cameraDirection	Number	Back = 0, Front-facing = 1
popoverOptions	String	iOS,iPad 彈出位置
saveToPhotoAlbum	Boolean	是否保存到相冊
correctOrientation	Boolean	設置攝像機拍攝的圖像是否爲正確的方向

Ionic4 調用 cordova 插件 cordova-plugin-file-transfer 實現圖片上傳

1.安裝插件：

 ionic cordova plugin add cordova-plugin-file-transfer
 npm install @ionic-native/file-transfer

2. app.module.ts 引入依賴注入

import { FileTransfer } from '@ionic-native/file-transfer/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,   
    Device,        
    Camera,
    FileTransfer,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

使用：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Three
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

   設備相關插件
    {{myDevice.uuid}}

    <br>
    <br>

    <ion-button (click)="doCamera()">
     執行拍照
    </ion-button>

    <br>
    <img [src]="imgSrc" />
</ion-content>

import { Component } from '@angular/core';

import { Device } from '@ionic-native/device/ngx';

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';


import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';


@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  public myDevice: any;
  public imgSrc: any;

  constructor(private device: Device, private camera: Camera, private transfer: FileTransfer) {
    this.myDevice = this.device;
  }

  doCamera() {

    const options: CameraOptions = {
      quality: 100,   //質量
      destinationType: this.camera.DestinationType.DATA_URL,   //返回圖片的類型  base64  url
      // encodingType: this.camera.EncodingType.JPEG,   //返回格式
      sourceType: this.camera.PictureSourceType.CAMERA,   //從相冊選擇  仍是攝像頭拍照
      // mediaType: this.camera.MediaType.PICTURE         //設置媒體的類型
      targetHeight: 400,    //必須加
      targetWidth: 400,    //必須加
      allowEdit: true
    }

    this.camera.getPicture(options).then((imageData) => {
     
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.imgSrc = base64Image;

      this.doUpload(base64Image);


    }, (err) => {
      // Handle error

      console.log(err);
    });

  }


  doUpload(fileSrc) {

    const fileTransfer: FileTransferObject = this.transfer.create();

    let options: FileUploadOptions = {
      fileKey: 'file',   
      fileName: 'name.jpg',   //名稱
      mimeType: 'image/jpeg',
      httpMethod: "POST",
      params: {
        username: "我是一個測試的名稱", 
        age: "21",
        height: "180"
      } /*附帶的一些信息*/
      // headers: {}
    }

    var api = 'http://127.0.0.1:8080/imgUpload';

    fileTransfer.upload(fileSrc, api, options)
    .then((data) => {

      console.log(data);
      // success
      alert(JSON.stringify(data));

    }, (err) => {
      // error

      alert(JSON.stringify(err));
    })

  }

}