\n 
\n })\n } \n
\n )\n}\n\nexport default FrameChooser\n","export default __webpack_public_path__ + \"static/media/HeaderImage.f98423dd.svg\";","import { useState, useEffect, useCallback } from 'react'\nimport './App.css'\nimport { useDropzone } from 'react-dropzone'\nimport FrameChooser from './FrameChooser.js'\nimport HeaderImage from './HeaderImage.svg'\n\nimport mergeImages from 'merge-images'\n\nconst frameSize = 1080\n\nfunction App() {\n const [frameURL, setFrameURL] = useState(null)\n const [originalPhoto, setOriginalPhoto] = useState(null)\n const [photo, setPhoto] = useState(null)\n const [combinedImage, setCombinedImage] = useState(null)\n\n const handleFrameURL = useCallback(newFrameURL => {\n setFrameURL(newFrameURL)\n }, [setFrameURL])\n\n\n const handleReadFile = useCallback(file => {\n if (!(!!file)) {\n return;\n }\n\n const reader = new FileReader()\n reader.onload = reader_event => {\n const img = new Image()\n img.onload = function () {\n const offscreenCanvas = document.createElement('canvas')\n offscreenCanvas.width = frameSize\n offscreenCanvas.height = frameSize\n\n const offscreenCanvas_ctx = offscreenCanvas.getContext('2d', { alpha: true })\n\n let width, height;\n if (img.width < img.height) {\n height = (img.height / img.width) * frameSize\n width = frameSize\n } else {\n height = frameSize\n width = (img.width / img.height) * frameSize\n }\n \n offscreenCanvas_ctx.drawImage(\n img,\n (frameSize - width) / 2,\n (frameSize - height) / 2,\n width,\n height,\n )\n\n const pngUrl = offscreenCanvas.toDataURL()\n setPhoto(pngUrl)\n }\n img.src = reader_event.target.result\n setOriginalPhoto(reader_event.target.result)\n }\n reader.readAsDataURL(file)\n }, [])\n\n const handleImage = useCallback(files_event => {\n handleReadFile(files_event.target.files[0])\n }, [handleReadFile])\n\n const onDrop = useCallback(acceptedFiles => {\n handleReadFile(acceptedFiles[0])\n }, [handleReadFile])\n\n const { isDragActive, getRootProps } = useDropzone({\n onDrop,\n accept: 'image/*',\n maxFiles: 1,\n noKeyboard: true,\n })\n\n\n useEffect(() => {\n mergeImages([\n ...(photo ? [photo] : []),\n ...(frameURL ? [frameURL] : []),\n ])\n .then(b64 => setCombinedImage(b64))\n }, [photo, frameURL])\n\n\n return (\n Choose a frame:
\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return\n 
\n\n 
\n \n \n \n
\n )\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n \n Drop your photo here ...\n
\n\n Choose your Photo:
\nIt should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.
\n\n \n\nDownload your Photo:
\n\n \n })\n } \n
\n )\n}\n\nexport default FrameChooser\n","export default __webpack_public_path__ + \"static/media/HeaderImage.1f39a672.svg\";","import { useState, useEffect, useCallback } from 'react'\nimport './App.css'\nimport { useDropzone } from 'react-dropzone'\nimport FrameChooser from './FrameChooser.js'\nimport HeaderImage from './HeaderImage.svg'\n\nimport mergeImages from 'merge-images'\n\nconst frameSize = 1080\n\nfunction App() {\n const [frameURL, setFrameURL] = useState(null)\n const [originalPhoto, setOriginalPhoto] = useState(null)\n const [photo, setPhoto] = useState(null)\n const [combinedImage, setCombinedImage] = useState(null)\n\n const handleFrameURL = useCallback(newFrameURL => {\n setFrameURL(newFrameURL)\n }, [setFrameURL])\n\n\n const handleReadFile = useCallback(file => {\n if (!(!!file)) {\n return;\n }\n\n const reader = new FileReader()\n reader.onload = reader_event => {\n const img = new Image()\n img.onload = function () {\n const offscreenCanvas = document.createElement('canvas')\n offscreenCanvas.width = frameSize\n offscreenCanvas.height = frameSize\n\n const offscreenCanvas_ctx = offscreenCanvas.getContext('2d', { alpha: true })\n\n let width, height;\n if (img.width < img.height) {\n height = (img.height / img.width) * frameSize\n width = frameSize\n } else {\n height = frameSize\n width = (img.width / img.height) * frameSize\n }\n \n offscreenCanvas_ctx.drawImage(\n img,\n (frameSize - width) / 2,\n (frameSize - height) / 2,\n width,\n height,\n )\n\n const pngUrl = offscreenCanvas.toDataURL()\n setPhoto(pngUrl)\n }\n img.src = reader_event.target.result\n setOriginalPhoto(reader_event.target.result)\n }\n reader.readAsDataURL(file)\n }, [])\n\n const handleImage = useCallback(files_event => {\n handleReadFile(files_event.target.files[0])\n }, [handleReadFile])\n\n const onDrop = useCallback(acceptedFiles => {\n handleReadFile(acceptedFiles[0])\n }, [handleReadFile])\n\n const { isDragActive, getRootProps } = useDropzone({\n onDrop,\n accept: 'image/*',\n maxFiles: 1,\n noKeyboard: true,\n })\n\n\n useEffect(() => {\n mergeImages([\n ...(photo ? [photo] : []),\n ...(frameURL ? [frameURL] : []),\n ])\n .then(b64 => setCombinedImage(b64))\n }, [photo, frameURL])\n\n\n return (\n Choose a frame:
\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return\n \n\n
\n )\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n \n Drop your photo here ...\n
\n\n Choose your Photo:
\nIt should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.
\n\n \n\n