mirror of
https://github.com/voltbonn/profile-picture-generator.git
synced 2024-12-23 00:05:09 +00:00
2 lines
No EOL
14 KiB
JavaScript
2 lines
No EOL
14 KiB
JavaScript
(this["webpackJsonpprofile-picture-generator"]=this["webpackJsonpprofile-picture-generator"]||[]).push([[0],{22:function(e,t,a){},26:function(e,t,a){var n={"./ProfileFrame Blue Bars.png":[29,4],"./ProfileFrame Green Bars.png":[30,5],"./ProfileFrame Mixed Bars.png":[31,6],"./ProfileFrame Purple.png":[32,7],"./ProfileFrame Red Bars.png":[33,8],"./ProfileFrame White Bars.png":[34,9],"./ProfileFrame Yellow Bars.png":[35,10],"./white-round-bottom-logo.png":[36,11]};function c(e){if(!a.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],c=t[0];return a.e(t[1]).then((function(){return a(c)}))}c.keys=function(){return Object.keys(n)},c.id=26,e.exports=c},27:function(e,t,a){var n={"./DeineWahl.png":[37,12],"./Europa.png":[38,13],"./JetztBistDuDran.png":[39,14],"./Volt.png":[40,15],"./Volt21.png":[41,16],"./VoltEuropa.png":[42,17],"./VoltRLP.png":[43,18],"./VoteVolt.png":[44,19],"./paneurop\xe4isch.png":[45,20],"./pragmatisch.png":[46,21],"./progressiv.png":[47,22]};function c(e){if(!a.o(n,e))return Promise.resolve().then((function(){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=n[e],c=t[0];return a.e(t[1]).then((function(){return a(c)}))}c.keys=function(){return Object.keys(n)},c.id=27,e.exports=c},28:function(e,t,a){"use strict";a.r(t);var n=a(1),c=a(0),r=a.n(c),o=a(11),s=a.n(o),O=a(10),h=a(8),i=a(2),u=(a(22),a(16)),d=a(4),l=a.n(d),j=a(5);var b=function(e){var t=e.onChange,r=Object(c.useState)([]),o=Object(i.a)(r,2),s=o[0],O=o[1],h=Object(c.useState)(null),u=Object(i.a)(h,2),d=u[0],b=u[1];Object(c.useEffect)((function(){function e(){return(e=Object(j.a)(l.a.mark((function e(){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["ProfileFrame Purple","ProfileFrame Mixed Bars","ProfileFrame Yellow Bars","ProfileFrame Red Bars","ProfileFrame Blue Bars","ProfileFrame Green Bars","ProfileFrame White Bars","white-round-bottom-logo"].map(function(){var e=Object(j.a)(l.a.mark((function e(t){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.t0=t,e.next=3,a(26)("./".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){O(e),b(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var f=Object(c.useCallback)((function(e){b(e.target.dataset.src)}),[b]);return Object(c.useEffect)((function(){t(d)}),[t,d]),Object(n.jsxs)("div",{className:"FrameChooser",children:[Object(n.jsx)("h2",{children:"Choose a frame:"}),s.map((function(e){var t=e.src.default,a=d===t;return Object(n.jsx)("img",{alt:e.name,"data-src":t,src:t,className:a?"frame choosen":"frame",onClick:f},t)}))]})};var f=function(e){var t=e.onChange,r=Object(c.useState)([]),o=Object(i.a)(r,2),s=o[0],O=o[1],h=Object(c.useState)(null),u=Object(i.a)(h,2),d=u[0],b=u[1];Object(c.useEffect)((function(){function e(){return(e=Object(j.a)(l.a.mark((function e(){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:Promise.all(["","DeineWahl","Europa","JetztBistDuDran","paneurop\xe4isch","pragmatisch","progressiv","Volt","Volt21","VoltEuropa","VoltRLP","VoteVolt"].map(function(){var e=Object(j.a)(l.a.mark((function e(t){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(e.t0=t,""!==t){e.next=5;break}e.t1="",e.next=8;break;case 5:return e.next=7,a(27)("./".concat(t,".png"));case 7:e.t1=e.sent;case 8:return e.t2=e.t1,e.abrupt("return",{name:e.t0,src:e.t2});case 10:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}())).then((function(e){O(e),b(e[0].src.default)}));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}!function(){e.apply(this,arguments)}()}),[]);var f=Object(c.useCallback)((function(e){b(e.target.dataset.src)}),[b]);return Object(c.useEffect)((function(){t(d)}),[t,d]),Object(n.jsxs)("div",{className:"HashtagChooser",children:[Object(n.jsx)("h2",{children:"Choose a Hashtag:"}),s.map((function(e){var t=e.src.default,a=d===t;return Object(n.jsx)("button",{"data-src":t,className:a?"hashtag_button choosen":"hashtag_button",onClick:f,children:""===e.name?"No Hashtag":"#"+e.name},t)}))]})},p=a(13),g=a.n(p),A=a(14),D=a.n(A);function C(e,t,a){return Math.min(Math.max(t,e),a)}var Q=function(e){var t=e.onChange,a=e.backgroundURL,r=e.backgroundRatio,o=e.frameURL,s=e.hashtagURL,O=Object(c.useRef)(null),h=Object(c.useRef)(null),u=Object(c.useState)(!1),d=Object(i.a)(u,2),l=d[0],j=d[1],b=Object(c.useState)(null),f=Object(i.a)(b,2),p=f[0],A=f[1],Q=Object(c.useState)(null),H=Object(i.a)(Q,2),w=H[0],m=H[1],T=Object(c.useState)(0),v=Object(i.a)(T,2),x=v[0],U=v[1],F=Object(c.useState)(0),N=Object(i.a)(F,2),K=N[0],B=N[1],E=Object(c.useState)(0),k=Object(i.a)(E,2),P=k[0],S=k[1],y=Object(c.useState)(0),R=Object(i.a)(y,2),M=R[0],I=R[1],L=Object(c.useState)(1),V=Object(i.a)(L,2),Y=V[0],z=V[1],J=Object(c.useState)(300),X=Object(i.a)(J,2),_=X[0],G=X[1],W=Object(c.useState)(300),q=Object(i.a)(W,2),Z=q[0],$=q[1],ee=Object(c.useState)(300),te=Object(i.a)(ee,2),ae=te[0],ne=te[1],ce=Object(c.useState)(300),re=Object(i.a)(ce,2),oe=re[0],se=re[1],Oe=Object(c.useState)(0),he=Object(i.a)(Oe,2),ie=he[0],ue=he[1],de=Object(c.useState)(0),le=Object(i.a)(de,2),je=le[0],be=le[1],fe=Object(c.useState)(0),pe=Object(i.a)(fe,2),ge=pe[0],Ae=pe[1],De=Object(c.useState)(0),Ce=Object(i.a)(De,2),Qe=Ce[0],He=Ce[1];Object(c.useEffect)((function(){t&&t({x:x,y:K,scale:Y})}),[t,x,K,Y]),Object(c.useEffect)((function(){if(O&&O.current){var e=O.current.offsetWidth,t=O.current.offsetHeight;se(t),ne(e);var a=1,n=1;r<1?a=1/r:r>1&&(n=1*r),G(a),$(n)}}),[r]),Object(c.useEffect)((function(){var e=function(e,t,a,n,c){var r=Math.max(0,e*a-n)/2,o=Math.max(0,t*a-c)/2;return{rangeMaxX:r,rangeMinX:0-r,rangeMaxY:o,rangeMinY:0-o}}(_*ae,Z*oe,Y,ae,oe),t=e.rangeMinX,a=e.rangeMinY,n=e.rangeMaxX,c=e.rangeMaxY;ue(t),be(a),Ae(n),He(c)}),[_,Z,ae,oe,Y]),Object(c.useEffect)((function(){U(0),B(0),S(0),I(0),z(1)}),[a]);var we=Object(c.useCallback)((function(e){var t=1*e.target.dataset.x,a=1*e.target.dataset.y,n=C(t+e.deltaX,ie,ge),c=C(a+e.deltaY,je,Qe);e.isFinal?(U(n||0),B(c||0),S(0),I(0)):(S(n-t||0),I(c-a||0))}),[ie,je,ge,Qe]),me=Object(c.useCallback)((function(e,t,a,n){e.preventDefault();var c=C(1*e.target.dataset.scale+t/200,1,8);z(c||1);var r=1*e.target.dataset.x,o=1*e.target.dataset.y;U(C(r,ie,ge)||0),B(C(o,je,Qe)||0)}),[ie,je,ge,Qe]);return Object(c.useEffect)((function(){if(!l&&O&&O.current){var e=O.current;e.addEventListener("mousedown",(function(e){e.preventDefault()}),!1),e.addEventListener("touchstart",(function(e){e.preventDefault()}),!1),e.addEventListener("touchend",(function(e){e.preventDefault()}),!1),e.addEventListener("touchmove",(function(e){e.preventDefault()}),!1),A(new g.a(e,{direction:"DIRECTION_ALL"})),m(D()(e)),j(!0)}}),[O,l]),Object(c.useEffect)((function(){if(p&&w&&l&&O&&O.current)return p.on("pan",we),w.wheel(me),function(){p.off("pan",we),w.unwheel()}}),[O,we,me,l,p,w]),Object(n.jsxs)("div",{className:"Editor",ref:O,"data-x":x,"data-y":K,"data-scale":Y,children:[Object(n.jsx)("img",{src:a,ref:h,alt:"",className:"background",style:{width:100*_+"%",height:100*Z+"%",transform:"translate3d(calc(-50% + ".concat(x+P,"px), calc(-50% + ").concat(K+M,"px), 0) scale(").concat(Y,",").concat(Y,")")}}),Object(n.jsx)("img",{src:o,alt:"",className:"foreground"}),Object(n.jsx)("img",{src:s,alt:"",className:"hashtag"})]})},H=a.p+"static/media/HeaderImage.1f39a672.svg",w="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAAQ4AgMAAACRfoQcAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJUExURVIreVIreVEreKabc9cAAAADdFJOU//+/Q3dsqEAAATsSURBVHgB7dAxAQAABAAwQtI/ipMCvi3CgiMV6NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NChQIcOHTp06NChQ4cOHTp06NChQ4cOHejQoUOHDh06dOjQoUOHDh06dOjQoUMHOnTo0KFDhw4dOnTo0KFDhw4dOnTo0IEOHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQ4cOBTp06NChQ4cOHTp06NChQ4cOHTp06ECHDh06dOjQoUOHDh06dOjQoUOHDh060KFDhw4dOnTo0KFDhw4dOnTo0KFDhw506NChQ4cOHTp06NChQ4cOHTp06NChAx06dOjQoUOHDh06dOjQoUOHDh06dOhAhw4dOnTo0KFDhw4dOnTo0KFDhw4dOtChQ4cOHTp06NChQ4cOHTp06NChQwc6dOjQoUOHDh06dOjQoUOHDh06dOjQgQ4dOnTo0KFDhw4dOnTo0KFDhw4dOnSgQ4cOHTp06NChQ4cOHTp06NChQ4cOHTx06NChQ4cOdOjQoUOHDh06dOjQoUOHDh06dOjQoQMdOnTo0KFDhw4dOnTo0KFDhw4dOnToQIcOHTp06NChQ4cOHTp06NChQ4cOHTrQoUOHDh06dOjQoUOHDh06dOjQoUOHDnTo0KFDhw4dOnTo0KFDhw4dOnTo0KEDHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4d6NChQ4cOHTp06NChQ4cOHTp06NChQ4cCHTp06NChQ4cOHTp06NChQ4cOHTp0oEOHDh06dOjQoUOHDh06dOjQoUOHDh3o0KFDhw4dOnTo0KFDhw4dOnTo0KFDBzp06NChQ4cOHTp06NChQ4cOHTp06NCBDh06dOjQoUOHDh06dOjQoUOHDh06dKBDhw4dOnTo0KFDhw4dOnTo0KFDhw4dxeoB30xd38yzCvgAAAAASUVORK5CYII=",m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAALSURBVHgBY2BgAAAAAwABjPg5OgAAAABJRU5ErkJggg==",T=a(15),v=1080;var x=function(){var e=Object(c.useState)(null),t=Object(i.a)(e,2),a=t[0],r=t[1],o=Object(c.useState)(null),s=Object(i.a)(o,2),d=s[0],l=s[1],j=Object(c.useState)(null),p=Object(i.a)(j,2),g=p[0],A=p[1],D=Object(c.useState)(1),C=Object(i.a)(D,2),x=C[0],U=C[1],F=Object(c.useState)(null),N=Object(i.a)(F,2),K=N[0],B=N[1],E=Object(c.useState)(0),k=Object(i.a)(E,2),P=k[0],S=k[1],y=Object(c.useState)(0),R=Object(i.a)(y,2),M=R[0],I=R[1],L=Object(c.useState)({x:0,y:0,scale:1}),V=Object(i.a)(L,2),Y=V[0],z=V[1],J=Object(c.useCallback)((function(e){r(e)}),[r]),X=Object(c.useCallback)((function(e){l(e)}),[l]),_=Object(c.useCallback)((function(e){var t=e.x,a=e.y,n=e.scale;z({x:t,y:a,scale:n})}),[]),G=Object(c.useCallback)((function(e){if(e){var t=new FileReader;t.onload=function(t){var a=new Image;a.onload=function(){var n,c;a.width<a.height?(c=a.height/a.width*v,n=v):(c=v,n=a.width/a.height*v),function(e,t){var a=new FileReader;a.onload=function(e){var a=new DataView(e.target.result);if(65496!==a.getUint16(0,!1))return t(-2);for(var n=a.byteLength,c=2;c<n;){var r=a.getUint16(c,!1);if(c+=2,65505===r){if(1165519206!==a.getUint32(c+=2,!1))return t(-1);var o=18761===a.getUint16(c+=6,!1);c+=a.getUint32(c+4,o);var s=a.getUint16(c,o);c+=2;for(var O=0;O<s;O++)if(274===a.getUint16(c+12*O,o))return t(a.getUint16(c+12*O+8,o))}else{if(65280!==(65280&r))break;c+=a.getUint16(c,!1)}}return t(-1)},a.readAsArrayBuffer(e.slice(0,65536))}(e,(function(e){var a=1;switch(e){case 2:case 3:case 4:a=c/n;break;case 5:case 6:case 7:case 8:a=n/c;break;default:a=c/n}S(n),I(c),A(t.target.result),B(e),U(a)}))},a.src=t.target.result},t.readAsDataURL(e)}}),[]),W=Object(c.useCallback)((function(e){G(e.target.files[0])}),[G]),q=Object(c.useCallback)((function(e){G(e[0])}),[G]),Z=Object(c.useCallback)((function(){var e=new Image;e.onload=function(){var t=document.createElement("canvas");t.width=v,t.height=v;var n=t.getContext("2d",{alpha:!0});switch(K){case 2:n.translate(t.width,0),n.scale(-1,1);break;case 3:n.translate(t.width,t.height),n.rotate(Math.PI);break;case 4:n.translate(0,t.height),n.scale(1,-1);break;case 5:n.rotate(.5*Math.PI),n.scale(1,-1);break;case 6:n.rotate(.5*Math.PI),n.translate(0,-t.height);break;case 7:n.rotate(.5*Math.PI),n.translate(t.width,-t.height),n.scale(-1,1);break;case 8:n.rotate(-.5*Math.PI),n.translate(-t.width,0)}var c=P*Y.scale,r=M*Y.scale;n.drawImage(e,3.5*Y.x+.5*(v-c),3.5*Y.y+.5*(v-r),c,r);var o=t.toDataURL();Object(T.a)([w].concat(Object(h.a)(o?[o]:[]),Object(h.a)(a?[a]:[]),Object(h.a)(d?[d]:[]))).then((function(e){!function(e,t){var a=document.createElement("a");document.body.appendChild(a),a.download=e,a.href=t,a.click(),a.remove()}("volt-profile-picture.png",e)}))},e.src=g}),[g,Y.x,Y.y,Y.scale,K,a,d,M,P]),$=Object(u.a)({onDrop:q,accept:"image/*",maxFiles:1,noKeyboard:!0}),ee=$.isDragActive,te=$.getRootProps;return Object(n.jsxs)("div",Object(O.a)(Object(O.a)({className:"App"},te()),{},{children:[Object(n.jsx)("img",{src:H,className:"HeaderImage",alt:"Volt Logo"}),Object(n.jsx)("div",{className:ee?"droparea active":"droparea",children:"Drop your photo here ..."}),Object(n.jsx)("h2",{children:"Choose your Photo:"}),Object(n.jsx)("p",{children:"It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer."}),Object(n.jsxs)("label",{className:"labelButton",tabIndex:"0",style:{outline:"none"},children:[g?Object(n.jsx)("img",{src:g,alt:"Preview"}):null,Object(n.jsx)("span",{children:g?"Change Photo":"Load Photo"}),Object(n.jsx)("input",{onChange:W,type:"file",accept:"image/*",style:{display:"none"}})]}),g?Object(n.jsxs)(n.Fragment,{children:[Object(n.jsx)(b,{onChange:J}),Object(n.jsx)(f,{onChange:X})]}):null,g&&a?Object(n.jsxs)(n.Fragment,{children:[Object(n.jsx)("h2",{children:"Reposition your Photo:"}),Object(n.jsx)(Q,{backgroundURL:g||m,backgroundRatio:x,frameURL:a,hashtagURL:d||m,onChange:_}),Object(n.jsx)("button",{onClick:Z,children:"Download Profile Picture"})]}):null,Object(n.jsxs)("footer",{children:[Object(n.jsx)("a",{href:"https://www.voltdeutschland.org/impressum",children:"Imprint"}),"\xa0 \u2022 \xa0",Object(n.jsx)("a",{href:"https://www.voltdeutschland.org/datenschutz",children:"Privacy Policy"}),"\xa0 \u2022 \xa0",Object(n.jsx)("a",{href:"https://github.com/voltbonn/profile-picture-generator",children:"Source Code"})]})]}))},U=function(e){e&&e instanceof Function&&a.e(3).then(a.bind(null,48)).then((function(t){var a=t.getCLS,n=t.getFID,c=t.getFCP,r=t.getLCP,o=t.getTTFB;a(e),n(e),c(e),r(e),o(e)}))};s.a.render(Object(n.jsx)(r.a.StrictMode,{children:Object(n.jsx)(x,{})}),document.getElementById("root")),U()}},[[28,1,2]]]);
|
|
//# sourceMappingURL=main.72b276c0.chunk.js.map
|