From a8c72b4be11bd6d18c5c2b09b366c4e8f29112ca Mon Sep 17 00:00:00 2001
From: thomasrosen <thomas.rosen@me.com>
Date: Thu, 21 Jan 2021 20:54:45 +0100
Subject: [PATCH] display the orignial image in the preview, not the cropped
 one

---
 src/App.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 10e9268..df8e062 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ const frameSize = 1080
 
 function App() {
     const [frameURL, setFrameURL] = useState(null)
+    const [originalPhoto, setOriginalPhoto] = useState(null)
     const [photo, setPhoto] = useState(null)
     const [combinedImage, setCombinedImage] = useState(null)
 
@@ -42,6 +43,7 @@ function App() {
                 setPhoto(pngUrl)
             }
             img.src = reader_event.target.result
+            setOriginalPhoto(reader_event.target.result)
         }
         reader.readAsDataURL(files_event.target.files[0])
     }, [setPhoto])
@@ -64,8 +66,8 @@ return (
         <p>It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.</p>
 
         <label className="labelButton" tabIndex="0" style={{outline:'none'}}>
-            {!!photo ? <img src={photo} alt="Preview" /> : null}
             <span>Load Photo</span>
+            {!!photo ? <img src={originalPhoto} alt="Preview" /> : null}
             <input onChange={handleImage} type="file" accept="image/*" style={{display: 'none'}} />
         </label>