前回；181009_ionic4_firestore_capacitor_camera2

もうどうにもならないCapacitor

以下のサイトを写経して、動くのだろうか。。。

http://tphangout.com/ionic-4-camera-with-capacitor/

Ionic 4 – Camera with Capacitor
JULY 30, 2018

https://capacitor.ionicframework.com/docs/getting-started/with-ionic/

Using Capacitor with Ionic(Capacitor公式サイト)

ionic start camera blank --type=angular
// No, No
// 一度、VisualStudioCodeを閉じてから、
// camera/ フォルダをVisualStudioCodeで開く
npm uninstall --save cordova-plugin-splashscreen
npm install --save @capacitor/cli @capacitor/core
npx cap init camerapp com.example.app
npm run build
npx cap add android

home.page.htmlと、home.page.tsの変更

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content padding>
  <img [src]="yourImage">
  <ion-button (click)="captureImage()">Capture !!</ion-button>
</ion-content>

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

import { Plugins, CameraSource, CameraResultType } from '@capacitor/core';

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

  yourImage: any;

  constructor() {

  }

  async captureImage() {
    const capturedImage = await Plugins.Camera.getPhoto(
      {
        quality: 90,
        allowEditing: true,
        source: CameraSource.Camera,
        resultType: CameraResultType.Uri
      }
    );

    this.yourImage = capturedImage.webPath;
  }

}

npm run build
npx capacitor sync

この後、androidstudioでapkファイルを作成する方法がよく紹介されているが、それなら、Ionic-Native（Cordova）で十分な気がする。

Capacitorを利用するメリットは、PWAでCameraなどが使えるからだと思う。

ng add @angular/pwa --project app
ionic build --prod
// npx cap open android

http://tphangout.com/ionic-4-camera-with-capacitor/

Ionic 4 – Camera with Capacitor
JULY 30, 2018