z_blog:2018:181009_ionic4-capacitor-camera

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] – [写経経過] adash333
+++ z_blog:2018:181009_ionic4-capacitor-camera [2018/10/09] (現在) – [参考] adash333
@@ 行 31: / 行 31: @@
 home.page.htmlと、home.page.tsの変更
+==== home.page.html ====
+<code>
+<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>
+</code>
+==== home.page.ts ====
+<code>
+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;
+  }
+}
+</code>
+===== npm run build =====
 <code>
 npm run build
 npx capacitor sync
+npx cap open android
 </code>
-この後、androidstudioでapkファイルを作成する方法がよく紹介されているが、それなら、Ionic-Native（Cordova）で十分な気がする。
+参考：[[:ionic3でcameraプラグイン|ionic3-camera(2018/10月時点)]]
+{{:z_blog:2018:pasted:20181009-234145.png}}
+アプリメニュー：Build → Build APK
+app/build/outputs/apk/ に、apkファイルが出てくるので、それを自分のAndroidスマホにGDrive経由でインストール。
+=> Androidスマホにapkファイルをインストールして、カメラが起動するところまでは行けた。しかし、カメラでとった写真が表示されない。。。
+コードを更新したときは、
+<code>
+npm run build
+npx cap copy
+</code>
+この、androidstudioでapkファイルを作成する方法がよく紹介されているが、それなら、Ionic-Native（Cordova）で十分な気がする。
 Capacitorを利用するメリットは、PWAでCameraなどが使えるからだと思う。
+===== アプリのPWA化 =====
 <code>
@@ 行 43: / 行 116: @@
 ionic build --prod
 </code>
+GitHub経由でnetlifyでデプロイしてみたが、CAPTURE!!ボタンをクリックしても、カメラは起動しなかった。
+ソースコード
+https://github.com/adash333/camera
+===== 参考 =====
+なんとプラグイン無しでpwaとしてカメラが動くionic3ソースコードが紹介されていた
+https://github.com/peterpeterparker/ionic-pwa-camera-no-plugins
+https://qiita.com/hedrall/items/94ef17b2e096c9d352bd\\
+@hedrall
+年08月07日に更新
+Ionic > カメラロールなどから画像を選択して、アップロードする
 ===== 写経元サイト =====

z_blog/2018/181009_ionic4-capacitor-camera.1539095415.txt.gz · 最終更新: 2018/10/09 by adash333