load image, combine with frame and display

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "merge-images": "^2.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

src/App.js

@@ -1,25 +1,66 @@
-import logo from './logo.svg';
-import './App.css';
+import { useState, useEffect, useCallback } from 'react'
+import './App.css'
+
+import frame_mixed from './frames/ProfileFrame Mixed Bars.png'
+
+import mergeImages from 'merge-images'
+
+const frameSize = 1080
 
 function App() {
+    const [photo, setPhoto] = useState(null)
+    const [combinedImage, setCombinedImage] = useState(null)
+
+    const handleImage = useCallback(files_event => {
+        const reader = new FileReader()
+        reader.onload = reader_event => {
+            const img = new Image()
+            img.onload = function () {
+                const offscreenCanvas = document.createElement('canvas')
+                offscreenCanvas.width = frameSize
+                offscreenCanvas.height = frameSize
+
+                const offscreenCanvas_ctx = offscreenCanvas.getContext('2d', { alpha: false })
+
+                const width = frameSize
+                const height = (img.height / img.width) * frameSize
+                offscreenCanvas_ctx.drawImage(
+                    img,
+                    (frameSize - width) / 2,
+                    (frameSize - height) / 2,
+                    width,
+                    height,
+                );
+
+                const pngUrl = offscreenCanvas.toDataURL()
+                setPhoto(pngUrl)
+            }
+            img.src = reader_event.target.result
+        }
+        reader.readAsDataURL(files_event.target.files[0])
+    }, [setPhoto])
+
+    useEffect(() => {
+        mergeImages([
+            ...(photo ? [photo] : []),
+            ...(frame_mixed ? [frame_mixed] : []),
+        ])
+        .then(b64 => setCombinedImage(b64))
+    }, [photo])
+
+
+
 return (
     <div className="App">
         <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+            <label>Load an Image:</label>
+            <input type="file" onChange={handleImage} />
+
+            <img src={combinedImage} className="App-logo" alt="Finished Frame" />
+
         </header>
     </div>
-  );
+)
 }
 
 export default App;

yarn.lock

@@ -7027,6 +7027,11 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
+merge-images@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-images/-/merge-images-2.0.0.tgz#4d68d6d90ad8c33a91aced0b5d8660983bf4db3a"
+  integrity sha512-bpI4j54n/Zl6ZTgxaR3xWou/lqI53RAAt8peXijW37BKqoON83LQ7XCZqtFiwzBfEXIws1isYyR06584yffAyA==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"