Blaster4385/aadhaar-kiosk-web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added overlay

Browse source
This commit is contained in:
Blaster4385 2022-08-26 04:08:45 +05:30
parent 951b6dbaf9
commit bdd4ad1b8b
3 changed files with 91 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
View file

@ -27,6 +27,25 @@ const PhotoCapture = () => {
'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
]
const svgIcon = () => (
<svg
width="100%"
height="100%"
className="svg"
viewBox="0 0 300 200"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<circle cx="50%" cy="50%" r="70" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
</svg>
)
return (
<>
<Header subheading={t('ENROLLMENT')} />
@ -50,18 +69,24 @@ const PhotoCapture = () => {
/>
<div className={styles.card__container}>
{!userData.photo ? (
<Webcam
audio={false}
height={400}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={600}
videoConstraints={{
height: 400,
width: 600,
facingMode: 'user'
}}
/>
<div className={styles.webcam__container}>
<Webcam
audio={false}
height={400}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={600}
videoConstraints={{
height: 400,
width: 600,
facingMode: 'user'
}}
/>
<div className={styles.overlay__container}>
{svgIcon()}
</div>
</div>
) : (
<img id="img" src={userData.photo} />
)}

13
client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
View file

@ -2,4 +2,17 @@
display: flex;
justify-content: center;
margin: 10px;
}
.webcam__container {
position: relative;
}
.overlay__container {
position: absolute ;
width: 100%;
top: 0 ;
right: 0 ;
bottom: 0 ;
left: 0;
}

58
client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
View file

@ -37,6 +37,25 @@ const PhotoCapture = () => {
'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
]
const svgIcon = () => (
<svg
width="100%"
height="100%"
className="svg"
viewBox="0 0 300 200"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<circle cx="50%" cy="50%" r="70" />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
</svg>
)
return (
<>
<Header subheading={t('UPDATE')} />
@ -58,23 +77,28 @@ const PhotoCapture = () => {
</>
}
/>
<div className={styles.card__container}>
{userData?.photo === '' ? (
<Webcam
audio={false}
height={300}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={500}
videoConstraints={{
height: 300,
width: 500,
facingMode: 'user'
}}
/>
) : (
<img id="img" src={userData?.photo} />
)}
<div className={styles.webcam__container}>
<div className={styles.card__container}>
{userData?.photo === '' ? (
<Webcam
audio={false}
height={300}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={500}
videoConstraints={{
height: 300,
width: 500,
facingMode: 'user'
}}
/>
) : (
<img id="img" src={userData?.photo} />
)}
</div>
<div className={styles.overlay__container}>
{svgIcon()}
</div>
</div>
<Grid container columnSpacing={10} justifyContent="center">
<Grid item>