Capture Image | Load from Gallery In Ionic-React Capacitor Example

Hello All, In the last topic we had discussed How to call REST API in Ionic-React. Now, In this example will make use of capacitor camera API to capture the image or to load the image from the gallery. We will take the example of the Ionic-react application to show how the camera API is worked.

How to Create Ionic React Project?

Install the latest Ionic CLI using the following command

npm install -g ionic/cli

We need to create an Ionic-react project using the following command

ionic start ionicReact blank --type=react

Run the application on browser use following command

ionic serve

How to capture image or load image from gallery in Ionic react capacitor application

We need to install a capacitor camera API using the following command

npm install @capacitor/camera

Sync the project using the following command

npx cap sync

Now, We need to import the following things

import {
IonContent, IonHeader, IonTitle,IonToolbar, IonItem, IonImg, IonGrid, IonPage, IonRow, IonCol, IonButton
} from '@ionic/react';
import React from 'react';
import { useState } from 'react';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

Now, take a constant to set the captured photo as follows

const [photo,setPhoto ]=useState<any>('PATH_DEFAULT_IMAGE');

In my case, the PATH_DEFAULT_IMAGE

'assets/icon/abc.jpg'

Now, We have to create some designs to show the captured/loaded image. So, We will create a button that triggers the event to capture/load the image & also will show the captured/loaded image inside the IonImg tag.

return (
<IonPage>
  <IonHeader>
    <IonToolbar color="primary">
    <IonTitle> Camera Example </IonTitle>
    </IonToolbar>
  </IonHeader>
<IonContent>
 <IonGrid>
  <IonRow>
   <IonCol>
   <IonImg src={ photo } style={{ width : 300, height: 200 }} ></IonImg>
    </IonCol>

   <IonCol>
     <IonItem>
       <IonButton style={{ marginLeft : 50 }} expand="full" onClick={ () => chooseImage()}> SELECT IMAGE</IonButton>
      </IonItem>
   </IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);

After completion of the design part will now move to write the logic.

We will create a chooseImage() function to set the captured/loaded image.

const chooseImage = () => {
 takePicture().then(data => {
   console.log(data);
   setPhoto(data.webPath)
 });
}

Now, We will write the actual image capture logic inside our takePicture() function

Create Prompt to select Camara / Gallery

const takePicture =() => {
 const image = Camera.getPhoto({
  quality : 90,
  resultType : CameraResultType.Uri,
  source : CameraSource.Prompt,
  promptLabelPhoto: 'Gallery'
  promptLabelPicture : 'Camera'
  promptLabelHeader : 'Cancel'
});
return image;
}

The full source code is as follows

import {
IonContent, IonHeader, IonTitle,IonToolbar, IonItem, IonImg, IonGrid, IonPage, IonRow, IonCol, IonButton
} from '@ionic/react';
import React from 'react';
import { useState } from 'react';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

const Home: React.FC = (props) => {




const [ photo, setPhoto ] = useState<any>('PATH_DEFAULT_IMAGE');





const chooseImage = () => {
 takePicture().then(data => {
   console.log(data);
   setPhoto(data.webPath)
 });
}




const takePicture =() => {
 const image = Camera.getPhoto({
  quality : 90,
  resultType : CameraResultType.Uri,
  source : CameraSource.Prompt,
  promptLabelPhoto: 'Gallery'
  promptLabelPicture : 'Camera'
  promptLabelHeader : 'Cancel'
});
return image;
}




return (
<IonPage>
  <IonHeader>
    <IonToolbar color="primary">
    <IonTitle> Camera Example </IonTitle>
    </IonToolbar>
  </IonHeader>
<IonContent>
 <IonGrid>
  <IonRow>
   <IonCol>
   <IonImg src={ photo } style={{ width : 300, height: 200 }} ></IonImg>
    </IonCol>

   <IonCol>
     <IonItem>
       <IonButton style={{ marginLeft : 50 }} expand="full" onClick={ () => chooseImage()}> SELECT IMAGE</IonButton>
      </IonItem>
   </IonCol>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);

};


export default Home;