mirror of
https://github.com/voltbonn/profile-picture-generator.git
synced 2024-12-23 00:05:09 +00:00
1 line
No EOL
18 KiB
Text
1 line
No EOL
18 KiB
Text
{"version":3,"sources":["frames lazy /^/.//.*/.png$/ groupOptions: {} namespace object","FrameChooser.js","HeaderImage.svg","App.js","reportWebVitals.js","index.js"],"names":["map","webpackAsyncContext","req","__webpack_require__","o","Promise","resolve","then","e","Error","code","ids","id","keys","Object","module","exports","FrameChooser","onFrameChange","useState","frames","setFrames","choosenFrame","setChoosenFrame","useEffect","a","all","frame_filename","name","src","new_frames","default","loadFrames","handleImageChoosing","useCallback","event","target","dataset","className","frame","frame_src_path","isChoosen","alt","data-src","onClick","frameSize","App","frameURL","setFrameURL","originalPhoto","setOriginalPhoto","photo","setPhoto","combinedImage","setCombinedImage","handleFrameURL","newFrameURL","handleReadFile","file","reader","FileReader","onload","reader_event","img","Image","canvas","document","createElement","width","height","ctx","getContext","alpha","callback","view","DataView","result","getUint16","length","byteLength","offset","marker","getUint32","little","tags","i","readAsArrayBuffer","slice","getOrientation","orientation","translate","scale","rotate","Math","PI","drawImage","pngUrl","toDataURL","readAsDataURL","handleImage","files_event","files","onDrop","acceptedFiles","useDropzone","accept","maxFiles","noKeyboard","isDragActive","getRootProps","mergeImages","b64","HeaderImage","tabIndex","style","outline","onChange","type","display","download","href","rel","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.67e708c3.chunk.js","sourcesContent":["var map = {\n\t\"./ProfileFrame B&G Bars.png\": [\n\t\t26,\n\t\t4\n\t],\n\t\"./ProfileFrame Blue Bars.png\": [\n\t\t27,\n\t\t5\n\t],\n\t\"./ProfileFrame Green Bars.png\": [\n\t\t28,\n\t\t6\n\t],\n\t\"./ProfileFrame Mixed Bars.png\": [\n\t\t29,\n\t\t7\n\t],\n\t\"./ProfileFrame Purple.png\": [\n\t\t30,\n\t\t8\n\t],\n\t\"./ProfileFrame R&Y Bars.png\": [\n\t\t31,\n\t\t9\n\t],\n\t\"./ProfileFrame Red Bars.png\": [\n\t\t32,\n\t\t10\n\t],\n\t\"./ProfileFrame White Bars.png\": [\n\t\t33,\n\t\t11\n\t],\n\t\"./ProfileFrame Yellow Bars.png\": [\n\t\t34,\n\t\t12\n\t]\n};\nfunction webpackAsyncContext(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\treturn Promise.resolve().then(function() {\n\t\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\t\te.code = 'MODULE_NOT_FOUND';\n\t\t\tthrow e;\n\t\t});\n\t}\n\n\tvar ids = map[req], id = ids[0];\n\treturn __webpack_require__.e(ids[1]).then(function() {\n\t\treturn __webpack_require__(id);\n\t});\n}\nwebpackAsyncContext.keys = function webpackAsyncContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackAsyncContext.id = 24;\nmodule.exports = webpackAsyncContext;","import { useState, useEffect, useCallback } from 'react'\n\nfunction FrameChooser({onFrameChange}) {\n const [frames, setFrames] = useState([])\n const [choosenFrame, setChoosenFrame] = useState(null)\n\n useEffect(() => {\n async function loadFrames(){\n Promise.all(\n [\n 'ProfileFrame Purple',\n 'ProfileFrame Yellow Bars',\n 'ProfileFrame Red Bars',\n 'ProfileFrame Blue Bars',\n 'ProfileFrame Green Bars',\n 'ProfileFrame White Bars',\n 'ProfileFrame Mixed Bars',\n 'ProfileFrame R&Y Bars',\n 'ProfileFrame B&G Bars',\n ]\n .map(async frame_filename => {\n return {\n name: frame_filename,\n src: await import(`./frames/${frame_filename}.png`),\n }\n })\n )\n .then(new_frames => {\n setFrames(new_frames)\n setChoosenFrame(new_frames[0].src.default)\n })\n }\n loadFrames()\n }, [])\n\n const handleImageChoosing = useCallback(event => {\n setChoosenFrame(event.target.dataset.src)\n }, [setChoosenFrame])\n\n useEffect(() => {\n onFrameChange(choosenFrame)\n }, [onFrameChange, choosenFrame])\n\n return (\n <div className=\"FrameChooser\">\n <h2>Choose a frame:</h2>\n {\n frames.map(frame => {\n const frame_src_path = frame.src.default\n const isChoosen = choosenFrame === frame_src_path\n return <img alt={frame.name} key={frame_src_path} data-src={frame_src_path} src={frame_src_path} className={isChoosen ? 'frame choosen' : 'frame'} onClick={handleImageChoosing}/>\n })\n } \n </div>\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 getOrientation(file, callback) {\n // Source: http://stackoverflow.com/a/32490603\n // (With some modifications: I just made the code fit the style-guide.)\n const reader = new FileReader()\n\n reader.onload = function (event) {\n const view = new DataView(event.target.result)\n\n if (view.getUint16(0, false) !== 0xFFD8) {\n return callback(-2)\n }\n\n const length = view.byteLength\n let offset = 2\n\n while (offset < length) {\n const marker = view.getUint16(offset, false)\n offset += 2\n\n if (marker === 0xFFE1) {\n if (view.getUint32(offset += 2, false) !== 0x45786966) {\n return callback(-1)\n }\n const little = view.getUint16(offset += 6, false) === 0x4949\n offset += view.getUint32(offset + 4, little)\n const tags = view.getUint16(offset, little)\n offset += 2\n\n for (var i = 0; i < tags; i++) {\n if (view.getUint16(offset + (i * 12), little) === 0x0112) {\n return callback(view.getUint16(offset + (i * 12) + 8, little))\n }\n }\n } else if ((marker & 0xFF00) !== 0xFF00) {\n break\n } else {\n offset += view.getUint16(offset, false)\n }\n }\n return callback(-1)\n }\n\n reader.readAsArrayBuffer(file.slice(0, 64 * 1024))\n}\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 canvas = document.createElement('canvas')\n canvas.width = frameSize\n canvas.height = frameSize\n\n const ctx = canvas.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 getOrientation(file, orientation => {\n // use the correct image orientation\n switch (orientation) {\n // Source: https://stackoverflow.com/a/30242954/2387277\n // Source: https://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin\n case 2:\n // horizontal flip\n ctx.translate(canvas.width, 0)\n ctx.scale(-1, 1)\n break\n case 3:\n // 180° rotate left\n ctx.translate(canvas.width, canvas.height)\n ctx.rotate(Math.PI)\n break\n case 4:\n // vertical flip\n ctx.translate(0, canvas.height)\n ctx.scale(1, -1)\n break\n case 5:\n // vertical flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.scale(1, -1)\n break\n case 6:\n // 90° rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(0, -canvas.height)\n break\n case 7:\n // horizontal flip + 90 rotate right\n ctx.rotate(0.5 * Math.PI)\n ctx.translate(canvas.width, -canvas.height)\n ctx.scale(-1, 1)\n break\n case 8:\n // 90° rotate left\n ctx.rotate(-0.5 * Math.PI)\n ctx.translate(-canvas.width, 0)\n break\n default:\n break\n }\n\n ctx.drawImage(\n img,\n (frameSize - width) / 2,\n (frameSize - height) / 2,\n width,\n height,\n )\n\n const pngUrl = canvas.toDataURL()\n setPhoto(pngUrl)\n })\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 <div className=\"App\" {...getRootProps()}>\n <img src={HeaderImage} className=\"HeaderImage\" alt=\"Volt Logo\" />\n\n <div className={isDragActive ? 'droparea active' : 'droparea'}>\n Drop your photo here ...\n </div>\n\n <h2>Choose your Photo:</h2>\n <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>\n\n <label className=\"labelButton\" tabIndex=\"0\" style={{outline:'none'}}>\n {!!photo ? <img src={originalPhoto} alt=\"Preview\" /> : null}\n <span>{!!photo ? 'Change Photo' : 'Load Photo'}</span>\n <input onChange={handleImage} type=\"file\" accept=\"image/*\" style={{display: 'none'}} />\n </label>\n\n <FrameChooser onFrameChange={handleFrameURL} />\n\n <h2>Download your Photo:</h2>\n <img src={combinedImage} className=\"FinishedFrame\" alt=\"Finished Frame\" />\n <a download=\"volt-profile-picture.png\" href={combinedImage} target=\"_blank\" rel=\"noreferrer\">\n <button>Download Profile Picture</button>\n </a>\n </div>\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 <React.StrictMode>\n <App />\n </React.StrictMode>,\n document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"sourceRoot":""} |