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;