diff options
author | Blaster4385 <venkateshchaturvedi12@gmail.com> | 2022-08-26 04:08:45 +0530 |
---|---|---|
committer | Blaster4385 <venkateshchaturvedi12@gmail.com> | 2022-08-26 04:08:45 +0530 |
commit | bdd4ad1b8b071fd04f1025076174757f0f355315 (patch) | |
tree | ff59e8ceb65c40f189c3d6f7a59833c77bc2af46 /client | |
parent | 951b6dbaf9d3da78c056cafbde17167887f73594 (diff) |
added overlay
Diffstat (limited to 'client')
3 files changed, 91 insertions, 29 deletions
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index ddd656c..7643f76 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -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} /> )} diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css index ad193e1..4a82e8e 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css @@ -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; }
\ No newline at end of file diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx index b53752c..0b8b4cb 100644 --- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx @@ -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> |