Take Photo

The TakePhotoService module provides several functions to capture, retake, share, and download photos in the web application.

Installation

To begin, you need to install the take photo webar module from the collection of our modules. You can install them using npm.

npm install @mirrar-sdm/take-photo-webar

Take photo

This createCapturedCanvas() function takes 4 parameter

'cameraCanvas' or 'galleryCanvas' element
'parentElement' i.e element where cameraCanvas or galleryCanvas is present
'faceMaskCanvas' element
'brand logo' image element

import TakePhotoService from '@mirrar-sdm/take-photo-webar'
 
const takePhoto = ()=>{
    const canvas = currentMode === 'camera' 
    ? document.getElementById('cameraGeneratedCanvas') 
    : document.getElementById('modelBackgroundCanvas');
    
  const jewelleryRenderedContainerId = currentMode === 'camera' 
    ? 'camera-container' 
    : 'modelBackgroundContainer';
    
  const parentElement = document.getElementById(jewelleryRenderedContainerId);
  const faceMaskCanvas = document.getElementById('faceMaskCanvas');
  const brandLogo = document.getElementById('brand-logo');
  
  TakePhotoService.createCapturedCanvas(canvas, parentElement, faceMaskCanvas, brandLogo);
}

Share captured image via native apps

const handleShare = async () => {
    try {
      TakePhotoService.shareCapturedPhotoViaNativeApps()
    } catch (error) {
      console.log(error)
    }
}

Download captured image

const handleDownload = async () => {
    try {
      await TakePhotoService.downloadCapturedPhoto()
    } catch (error) {
      console.log(error)
    }
}

Discard take photo screen

const handleRetake = () => {
    TakePhotoService.handleRetake()
}

Camera Mode Product Management