14.8 native camera integration

Author: webdevtut

package-lock.json

@@ -22,8 +22,11 @@
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
     "@capacitor/android": "^5.0.2",
+    "@capacitor/camera": "^5.0.2",
     "@capacitor/core": "5.0.2",
+    "@capacitor/splash-screen": "^5.0.2",
     "@ionic/angular": "^7.0.0",
+    "@ionic/pwa-elements": "^3.1.1",
     "ionicons": "^7.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

package.json

@@ -2,13 +2,24 @@ import { Component } from '@angular/core';
 import { AuthService } from './auth/auth.service';
 import { Router } from '@angular/router';
 
+import { SplashScreen } from '@capacitor/splash-screen';
+import { Platform } from '@ionic/angular'
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
-  constructor(private auth: AuthService, private router: Router) {}
+  constructor(private auth: AuthService, private router: Router, private platform: Platform) {
+    this.initializeApp()
+  }
+
+  initializeApp () {
+    this.platform.ready().then(async () => {
+     await SplashScreen.hide();
+    })
+  }
   onLogout(){
     this.auth.logout();
     this.router.navigateByUrl('/auth');

src/app/app.component.ts

@@ -6,6 +6,7 @@ import { IonicModule } from '@ionic/angular';
 import { NewOfferPageRoutingModule } from './new-offer-routing.module';
 
 import { NewOfferPage } from './new-offer.page';
+import { ImagePickerComponent } from 'src/app/shared/pickers/image-picker/image-picker.component';
 
 @NgModule({
   imports: [
@@ -14,6 +15,6 @@ import { NewOfferPage } from './new-offer.page';
     IonicModule,
     NewOfferPageRoutingModule
   ],
-  declarations: [NewOfferPage]
+  declarations: [NewOfferPage, ImagePickerComponent]
 })
 export class NewOfferPageModule {}

src/app/places/offers/new-offer/new-offer.module.ts

@@ -70,6 +70,11 @@
               </ion-item>
             </ion-col>
           </ion-row>
+          <ion-row>
+            <ion-col size-sm="3" offset-sm="3">
+              <app-image-picker (imagePick)="onImagePicked($event)"></app-image-picker>
+            </ion-col>
+          </ion-row>
     </ion-grid>
   </form>
 </ion-content>

src/app/places/offers/new-offer/new-offer.page.html

@@ -68,4 +68,9 @@ export class NewOfferPage implements OnInit {
         });
       });
   }
+
+
+  onImagePicked(imgData) {
+
+  }
 }

src/app/places/offers/new-offer/new-offer.page.ts

@@ -0,0 +1,12 @@
+<div class="picker">
+  <ion-img
+    role="button"
+    class="image"
+    (click)="onPickImage()"
+    [src]="selectedImage"
+    *ngIf="selectedImage"></ion-img>
+    <ion-button color="primary" (click)="onPickImage()" *ngIf="!selectedImage">
+      <ion-icon name="camera" slot="start"></ion-icon>
+      <ion-label>Take picture</ion-label>
+    </ion-button>
+</div>

src/app/shared/pickers/image-picker/image-picker.component.html

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Camera, CameraResultType } from '@capacitor/camera';
+
+@Component({
+  selector: 'app-image-picker',
+  templateUrl: './image-picker.component.html',
+  styleUrls: ['./image-picker.component.scss'],
+})
+export class ImagePickerComponent implements OnInit {
+  @Output() imagePick = new EventEmitter<string>();
+
+  selectedImage: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onPickImage() {
+    Camera.getPhoto({
+      quality: 90,
+      allowEditing: true,
+      height: 320,
+      width: 200,
+      resultType: CameraResultType.Uri,
+    })
+      .then((image) => {
+        this.selectedImage = image.webPath;
+        this.imagePick.emit(image.webPath);
+      })
+      .catch((err) => {
+        console.log(err);
+        return false;
+      });
+  }
+}

src/app/shared/pickers/image-picker/image-picker.component.scss

@@ -3,10 +3,13 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
 if (environment.production) {
   enableProdMode();
 }
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.log(err));
+
+  defineCustomElements(window);