From 8d276004302a7038dcf11a8e22f28bbd48fcf04b Mon Sep 17 00:00:00 2001 From: thomasrosen Date: Fri, 22 Jan 2021 07:46:52 +0000 Subject: [PATCH] thomasrosen published a site update --- asset-manifest.json | 6 +++--- index.html | 2 +- static/js/main.67e708c3.chunk.js | 2 ++ static/js/main.67e708c3.chunk.js.map | 1 + static/js/main.8c2fdff3.chunk.js | 2 -- static/js/main.8c2fdff3.chunk.js.map | 1 - 6 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 static/js/main.67e708c3.chunk.js create mode 100644 static/js/main.67e708c3.chunk.js.map delete mode 100644 static/js/main.8c2fdff3.chunk.js delete mode 100644 static/js/main.8c2fdff3.chunk.js.map diff --git a/asset-manifest.json b/asset-manifest.json index 04e69a2..53ebe0c 100644 --- a/asset-manifest.json +++ b/asset-manifest.json @@ -1,8 +1,8 @@ { "files": { "main.css": "/static/css/main.e57341b8.chunk.css", - "main.js": "/static/js/main.8c2fdff3.chunk.js", - "main.js.map": "/static/js/main.8c2fdff3.chunk.js.map", + "main.js": "/static/js/main.67e708c3.chunk.js", + "main.js.map": "/static/js/main.67e708c3.chunk.js.map", "runtime-main.js": "/static/js/runtime-main.bc0ce809.js", "runtime-main.js.map": "/static/js/runtime-main.bc0ce809.js.map", "static/js/2.ef6f135a.chunk.js": "/static/js/2.ef6f135a.chunk.js", @@ -44,6 +44,6 @@ "static/js/runtime-main.bc0ce809.js", "static/js/2.ef6f135a.chunk.js", "static/css/main.e57341b8.chunk.css", - "static/js/main.8c2fdff3.chunk.js" + "static/js/main.67e708c3.chunk.js" ] } \ No newline at end of file diff --git a/index.html b/index.html index cc8cf91..08123e8 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Volt Social Media Frame Generator
\ No newline at end of file +Volt Social Media Frame Generator
\ No newline at end of file diff --git a/static/js/main.67e708c3.chunk.js b/static/js/main.67e708c3.chunk.js new file mode 100644 index 0000000..c326081 --- /dev/null +++ b/static/js/main.67e708c3.chunk.js @@ -0,0 +1,2 @@ +(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[0],{20:function(e,t,a){},24:function(e,t,a){var r={"./ProfileFrame B&G Bars.png":[26,4],"./ProfileFrame Blue Bars.png":[27,5],"./ProfileFrame Green Bars.png":[28,6],"./ProfileFrame Mixed Bars.png":[29,7],"./ProfileFrame Purple.png":[30,8],"./ProfileFrame R&Y Bars.png":[31,9],"./ProfileFrame Red Bars.png":[32,10],"./ProfileFrame White Bars.png":[33,11],"./ProfileFrame Yellow Bars.png":[34,12]};function n(e){if(!a.o(r,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],n=t[0];return a.e(t[1]).then((function(){return a(n)}))}n.keys=function(){return Object.keys(r)},n.id=24,e.exports=n},25:function(e,t,a){"use strict";a.r(t);var r=a(1),n=a(0),c=a.n(n),o=a(11),i=a.n(o),s=a(10),l=a(9),u=a(3),f=(a(20),a(14)),h=a(5),b=a.n(h),d=a(8);var j=function(e){var t=e.onFrameChange,c=Object(n.useState)([]),o=Object(u.a)(c,2),i=o[0],s=o[1],l=Object(n.useState)(null),f=Object(u.a)(l,2),h=f[0],j=f[1];Object(n.useEffect)((function(){function e(){return(e=Object(d.a)(b.a.mark((function e(){return b.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["ProfileFrame Purple","ProfileFrame Yellow Bars","ProfileFrame Red Bars","ProfileFrame Blue Bars","ProfileFrame Green Bars","ProfileFrame White Bars","ProfileFrame Mixed Bars","ProfileFrame R&Y Bars","ProfileFrame B&G Bars"].map(function(){var e=Object(d.a)(b.a.mark((function e(t){return b.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.t0=t,e.next=3,a(24)("./".concat(t,".png"));case 3:return e.t1=e.sent,e.abrupt("return",{name:e.t0,src:e.t1});case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){s(e),j(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var g=Object(n.useCallback)((function(e){j(e.target.dataset.src)}),[j]);return Object(n.useEffect)((function(){t(h)}),[t,h]),Object(r.jsxs)("div",{className:"FrameChooser",children:[Object(r.jsx)("h2",{children:"Choose a frame:"}),i.map((function(e){var t=e.src.default,a=h===t;return Object(r.jsx)("img",{alt:e.name,"data-src":t,src:t,className:a?"frame choosen":"frame",onClick:g},t)}))]})},g=a.p+"static/media/HeaderImage.1f39a672.svg",m=a(13),p=1080;var O=function(){var e=Object(n.useState)(null),t=Object(u.a)(e,2),a=t[0],c=t[1],o=Object(n.useState)(null),i=Object(u.a)(o,2),h=i[0],b=i[1],d=Object(n.useState)(null),O=Object(u.a)(d,2),v=O[0],P=O[1],F=Object(n.useState)(null),w=Object(u.a)(F,2),x=w[0],B=w[1],k=Object(n.useCallback)((function(e){c(e)}),[c]),y=Object(n.useCallback)((function(e){if(e){var t=new FileReader;t.onload=function(t){var a=new Image;a.onload=function(){var t=document.createElement("canvas");t.width=p,t.height=p;var r,n,c=t.getContext("2d",{alpha:!0});a.width {\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
\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 {frame.name}\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 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
\n \"Volt\n\n
\n Drop your photo here ...\n
\n\n

Choose your Photo:

\n

It 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 \n\n

Download your Photo:

\n \"Finished\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 \n ,\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":""} \ No newline at end of file diff --git a/static/js/main.8c2fdff3.chunk.js b/static/js/main.8c2fdff3.chunk.js deleted file mode 100644 index ff7f21c..0000000 --- a/static/js/main.8c2fdff3.chunk.js +++ /dev/null @@ -1,2 +0,0 @@ -(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[0],{20:function(e,t,r){},24:function(e,t,r){var a={"./ProfileFrame B&G Bars.png":[26,4],"./ProfileFrame Blue Bars.png":[27,5],"./ProfileFrame Green Bars.png":[28,6],"./ProfileFrame Mixed Bars.png":[29,7],"./ProfileFrame Purple.png":[30,8],"./ProfileFrame R&Y Bars.png":[31,9],"./ProfileFrame Red Bars.png":[32,10],"./ProfileFrame White Bars.png":[33,11],"./ProfileFrame Yellow Bars.png":[34,12]};function n(e){if(!r.o(a,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=a[e],n=t[0];return r.e(t[1]).then((function(){return r(n)}))}n.keys=function(){return Object.keys(a)},n.id=24,e.exports=n},25:function(e,t,r){"use strict";r.r(t);var a=r(1),n=r(0),c=r.n(n),o=r(11),s=r.n(o),i=r(10),l=r(9),u=r(3),f=(r(20),r(14)),j=r(5),h=r.n(j),b=r(8);var d=function(e){var t=e.onFrameChange,c=Object(n.useState)([]),o=Object(u.a)(c,2),s=o[0],i=o[1],l=Object(n.useState)(null),f=Object(u.a)(l,2),j=f[0],d=f[1];Object(n.useEffect)((function(){function e(){return(e=Object(b.a)(h.a.mark((function e(){return h.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["ProfileFrame Purple","ProfileFrame Yellow Bars","ProfileFrame Red Bars","ProfileFrame Blue Bars","ProfileFrame Green Bars","ProfileFrame White Bars","ProfileFrame Mixed Bars","ProfileFrame R&Y Bars","ProfileFrame B&G Bars"].map(function(){var e=Object(b.a)(h.a.mark((function e(t){return h.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.t0=t,e.next=3,r(24)("./".concat(t,".png"));case 3:return e.t1=e.sent,e.abrupt("return",{name:e.t0,src:e.t1});case 5:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){i(e),d(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var m=Object(n.useCallback)((function(e){d(e.target.dataset.src)}),[d]);return Object(n.useEffect)((function(){t(j)}),[t,j]),Object(a.jsxs)("div",{className:"FrameChooser",children:[Object(a.jsx)("h2",{children:"Choose a frame:"}),s.map((function(e){var t=e.src.default,r=j===t;return Object(a.jsx)("img",{alt:e.name,"data-src":t,src:t,className:r?"frame choosen":"frame",onClick:m},t)}))]})},m=r.p+"static/media/HeaderImage.1f39a672.svg",p=r(13),O=1080;var g=function(){var e=Object(n.useState)(null),t=Object(u.a)(e,2),r=t[0],c=t[1],o=Object(n.useState)(null),s=Object(u.a)(o,2),j=s[0],h=s[1],b=Object(n.useState)(null),g=Object(u.a)(b,2),v=g[0],F=g[1],P=Object(n.useState)(null),x=Object(u.a)(P,2),B=x[0],w=x[1],C=Object(n.useCallback)((function(e){c(e)}),[c]),y=Object(n.useCallback)((function(e){if(e){var t=new FileReader;t.onload=function(e){var t=new Image;t.onload=function(){var e=document.createElement("canvas");e.width=O,e.height=O;var r,a,n=e.getContext("2d",{alpha:!0});t.width {\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
\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 {frame.name}\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
\n \"Volt\n\n
\n Drop your photo here ...\n
\n\n

Choose your Photo:

\n

It 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 \n\n

Download your Photo:

\n \"Finished\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 \n ,\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":""} \ No newline at end of file