text: webpackJsonp([1],{18:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=a(21),i=a(0),l=a(27),o=(a.n(l),a(29));a.n(o);a(19),n.a.config.productionTip=!1,n.a.use(i.n),a(25),new n.a({el:"#q-app",render:function(e){return e(a(31).default)}})},19:function(e,t){},26:function(e,t){},28:function(e,t){},30:function(e,t){},31:function(e,t,a){"use strict";function n(e){a(32)}Object.defineProperty(t,"__esModule",{value:!0});var i=a(33),l=a(92),o=a(1),r=n,s=o(i.a,l.a,!1,r,"data-v-4af9e83e",null);t.default=s.exports},32:function(e,t){},33:function(e,t,a){"use strict";var n=a(0),i=a(34);t.a={components:{QIcon:n.e,QField:n.d,QInput:n.f,QLayout:n.g,QToolbar:n.j,QToolbarTitle:n.k,ImageParamsForm:i.a}}},34:function(e,t,a){"use strict";function n(e){a(35)}var i=a(36),l=a(91),o=a(1),r=n,s=o(i.a,l.a,!1,r,"data-v-6d3ac3b0",null);t.a=s.exports},35:function(e,t){},36:function(e,t,a){"use strict";function n(){var e=[{label:"png",value:"image/png"},{label:"gif",value:"image/gif"},{label:"jpg",value:"image/jpeg"},{label:"ico",value:"image/x-icon"},{label:"webp",value:"image/webp"}],t=[],a=document.createElement("canvas");return e.forEach(function(e){-1!==a.toDataURL(e.value).indexOf(e.value)&&t.push(e)}),t}var i=a(0),l=a(37),o=a(49),r=a(50),s=a(54),c=a(58),u={"image/png":"png","image/gif":"gif","image/jpeg":"jpg","image/x-icon":"ico","image/webp":"webp","image/svg+xml":"svg"},f={svg:new o.a,bitmap:new l.a};t.a={components:{ColorSelector:c.a,FontFaceSelector:s.a,SliderField:r.a,QCard:i.c,QInput:i.f,QSelect:i.h,QSlider:i.i},directives:{Ripple:i.l},data:function(){return{width:600,height:400,textColor:"#ffffff",backgroundColor:"#cccccc",caption:"",fontFamily:"sans-serif",fontSize:40,fontWeight:"400",fontAlign:"center",filetype:"image/png",dataURI:"",imageQuality:.92,filetypeOptions:[{label:"svg",value:"image/svg+xml"}]}},computed:{friendlyFilename:function(){var e=this.textColor.replace(/#/,""),t=this.backgroundColor.replace(/#/,""),a="dummy_"+this.width+"x"+this.height+"_"+e+"_"+t;if(""!==this.caption){var n=this.caption.replace(/\s/g,"-");n=n.replace(/[^A-Za-z0-9-]/g,""),n=n.toLowerCase(),a=a+"_"+n}return a=a+"."+u[this.filetype]},rendererParams:function(){return{width:this.width,height:this.height,textColor:this.textColor,backgroundColor:this.backgroundColor,caption:""!==this.caption?this.caption:this.width+" x "+this.height,fontFamily:this.fontFamily,fontSize:this.fontSize,fontWeight:this.fontWeight,filetype:this.filetype}}},watch:{rendererParams:function(){this.updateImage()},imageQuality:function(){this.updateImage()}},methods:{updateImage:Object(i.m)(function(){this.updateDataURI()},400),updateDataURI:function(){"image/svg+xml"===this.filetype?this.dataURI=f.svg.render(this.rendererParams):"image/jpeg"===this.filetype||"image/webp"===this.filetype?this.dataURI=f.bitmap.render(this.rendererParams,this.filetype,this.imageQuality):this.dataURI=f.bitmap.render(this.rendererParams,this.filetype)},selectDataURI:function(e){e.target.setSelectionRange(0,e.target.value.length)},onColorChange:function(e){this.backgroundColor=e.backgroundColor,this.textColor=e.textColor}},mounted:function(){this.filetypeOptions=this.filetypeOptions.concat(n()),this.updateImage()}}},37:function(e,t,a){"use strict";var n=a(8),i=a.n(n),l=a(9),o=a.n(l),r=function(){function e(){i()(this,e),this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}return o()(e,[{key:"render",value:function(e){this.canvas.setAttribute("width",e.width),this.canvas.setAttribute("height",e.height),this.ctx.clearRect(0,0,e.width,e.height),this.ctx.fillStyle=e.backgroundColor,this.ctx.fillRect(0,0,e.width,e.height),this.ctx.font=e.fontWeight+" "+e.fontSize+"px "+e.fontFamily,this.ctx.textBaseline="middle",this.ctx.textAlign="center",this.ctx.fillStyle=e.textColor,this.ctx.fillText(e.caption,e.width/2,e.height/2);for(var t=arguments.length,a=Array(t>1?t-1:0),n=1;n<t;n++)a[n-1]=arguments[n];return a&&1===a.length?this.canvas.toDataURL(a[0]):a&&2===a.length?this.canvas.toDataURL(a[0],a[1]):this.canvas.toDataURL()}}]),e}();t.a=r},49:function(e,t,a){"use strict";var n=a(8),i=a.n(n),l=a(9),o=a.n(l),r=function(){function e(){i()(this,e)}return o()(e,[{key:"render",value:function(e){var t='<svg width="'+e.width+'" height="'+e.height+'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '+e.width+" "+e.height+'" preserveAspectRatio="none">\n      <defs>\n        <style type="text/css">\n          #holder text {\n            fill: '+e.textColor+";\n            font-family: "+e.fontFamily+";\n            font-size: "+e.fontSize+"px;\n            font-weight: "+e.fontWeight+';\n          }\n        </style>\n      </defs>\n      <g id="holder">\n        <rect width="100%" height="100%" fill="'+e.backgroundColor+'"></rect>\n        <g>\n          <text text-anchor="middle" x="50%" y="50%" dy=".3em">'+e.caption+"</text>\n        </g>\n      </g>\n    </svg>";return"data:image/svg+xml;charset=UTF-8,"+encodeURIComponent(t)}}]),e}();t.a=r},50:function(e,t,a){"use strict";function n(e){a(51)}var i=a(52),l=a(53),o=a(1),r=n,s=o(i.a,l.a,!1,r,null,null);t.a=s.exports},51:function(e,t){},52:function(e,t,a){"use strict";t.a={props:{label:{type:String,required:!1}}}},53:function(e,t,a){"use strict";var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"slider-field"},[e.label?a("span",{staticClass:"slider-field__label"},[e._v(e._s(e.label))]):e._e(),e._v(" "),e._t("default")],2)},i=[],l={render:n,staticRenderFns:i};t.a=l},54:function(e,t,a){"use strict";var n=a(55),i=a(57),l=a(1),o=l(n.a,i.a,!1,null,null,null);t.a=o.exports},55:function(e,t,a){"use strict";var n=a(0),i=a(56),l=a.n(i);t.a={components:{QAutocomplete:n.a,QInput:n.f},data:function(){return{fontFamily:"sans-serif"}},methods:{autocompleteFilter:function(e,t){var a=t.field,n=t.list,i=e.toLowerCase();return n.filter(function(e){return l()(i,e[a].toLowerCase())})}},watch:{fontFamily:function(e){this.$emit("input",e)}}}},57:function(e,t,a){"use strict";var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("QInput",{attrs:{type:"text","stack-label":"Font family"},model:{value:e.fontFamily,callback:function(t){e.fontFamily=t},expression:"fontFamily"}},[a("QAutocomplete",{attrs:{filter:e.autocompleteFilter,debounce:0,"static-data":{field:"value",list:[{label:"Arial",value:"Arial"},{label:"Arial Black",value:"Arial Black"},{label:"Bookman",value:"Bookman"},{label:"Comic Sans MS",value:"Comic Sans MS"},{label:"Courier",value:"Courier"},{label:"Courier New",value:"Courier new"},{label:"cursive",value:"cursive"},{label:"fantasy",value:"fantasy"},{label:"Garamond",value:"Garamond"},{label:"Georgia",value:"Georgia"},{label:"Helvetica",value:"Helvetica"},{label:"Impact",value:"Impact"},{label:"Material Icons",value:"Material Icons",sublabel:"https://material.io/icons"},{label:"monospace",value:"monospace"},{label:"Open Sans",value:"Open Sans"},{label:"Palatino",value:"Palatino"},{label:"Roboto",value:"Roboto"},{label:"serif",value:"serif"},{label:"sans-serif",value:"sans-serif"},{label:"system-ui",value:"system-ui"},{label:"Times",value:"Times"},{label:"Times New Roman",value:"Times New Roman"},{label:"Trebuchet MS",value:"Trebuchet MS"},{label:"Ubuntu",value:"Ubuntu"},{label:"Verdana",value:"Verdana"}]}}})],1)},i=[],l={render:n,staticRenderFns:i};t.a=l},58:function(e,t,a){"use strict";var n=a(59),i=a(90),l=a(1),o=l(n.a,i.a,!1,null,null,null);t.a=o.exports},59:function(e,t,a){"use strict";var n=a(60),i=a.n(n),l=a(0),o=a(79),r=a.n(o),s=a(81),c=a.n(s);t.a={components:{QBtn:l.b,QInput:l.f},data:function(){return{backgroundColor:"#cccccc",textColor:"#ffffff"}},methods:{randomColors:function(){this.backgroundColor=r()(),c()(this.backgroundColor).light()?this.textColor="#000000":this.textColor="#ffffff"}},watch:{backgroundColor:function(){this.$emit("change",i()({},this.$data))},textColor:function(){this.$emit("change",i()({},this.$data))}}}},90:function(e,t,a){"use strict";var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("QInput",{attrs:{type:"text","stack-label":"Text color"},model:{value:e.textColor,callback:function(t){e.textColor=t},expression:"textColor"}}),e._v(" "),a("QInput",{attrs:{type:"text","stack-label":"Background color"},model:{value:e.backgroundColor,callback:function(t){e.backgroundColor=t},expression:"backgroundColor"}}),e._v(" "),a("QBtn",{attrs:{small:!0,icon:"color_lens",color:"secondary"},on:{click:function(t){e.randomColors()}}},[e._v("Random color")])],1)},i=[],l={render:n,staticRenderFns:i};t.a=l},91:function(e,t,a){"use strict";var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"image-params-form"},[a("QInput",{attrs:{type:"number","stack-label":"Width"},model:{value:e.width,callback:function(t){e.width=t},expression:"width"}}),e._v(" "),a("QInput",{attrs:{type:"number","stack-label":"Height"},model:{value:e.height,callback:function(t){e.height=t},expression:"height"}}),e._v(" "),a("ColorSelector",{on:{change:e.onColorChange}}),e._v(" "),a("QInput",{attrs:{type:"text","stack-label":"Caption"},model:{value:e.caption,callback:function(t){e.caption=t},expression:"caption"}}),e._v(" "),a("FontFaceSelector",{model:{value:e.fontFamily,callback:function(t){e.fontFamily=t},expression:"fontFamily"}}),e._v(" "),a("QInput",{attrs:{type:"number","stack-label":"Font size"},model:{value:e.fontSize,callback:function(t){e.fontSize=t},expression:"fontSize"}}),e._v(" "),a("QSelect",{attrs:{radio:"","stack-label":"Font weight",options:[{label:"100",value:"100"},{label:"200",value:"200"},{label:"300",value:"300"},{label:"400",value:"400"},{label:"500",value:"500"},{label:"600",value:"600"},{label:"700",value:"700"},{label:"800",value:"800"},{label:"900",value:"900"}]},model:{value:e.fontWeight,callback:function(t){e.fontWeight=t},expression:"fontWeight"}}),e._v(" "),a("QSelect",{attrs:{radio:"","stack-label":"Filetype",options:e.filetypeOptions},model:{value:e.filetype,callback:function(t){e.filetype=t},expression:"filetype"}}),e._v(" "),"image/jpeg"===e.filetype||"image/webp"===e.filetype?a("SliderField",{attrs:{label:"Image quality"}},[a("QSlider",{attrs:{min:0,max:1,step:.01,decimals:2,label:"","label-always":""},model:{value:e.imageQuality,callback:function(t){e.imageQuality=t},expression:"imageQuality"}})],1):e._e(),e._v(" "),a("div",{staticClass:"image-preview"},[a("img",{attrs:{src:e.dataURI,alt:"preview image"}})]),e._v(" "),a("QInput",{attrs:{prefix:'&lt;img&nbsp;src="',suffix:'">',"stack-label":"Data URI",readonly:""},on:{focus:function(t){e.selectDataURI(t)}},model:{value:e.dataURI,callback:function(t){e.dataURI=t},expression:"dataURI"}}),e._v(" "),a("a",{directives:[{name:"ripple",rawName:"v-ripple"}],staticClass:"\n    q-btn\n    row\n    inline\n    flex-center\n    q-focusable\n    q-hoverable\n    relative-position\n    q-btn-rectangle\n    q-btn-big\n    bg-primary\n    text-white\n    full-width\n    btn-download\n  ",attrs:{href:e.dataURI,download:e.friendlyFilename}},[a("div",{staticClass:"desktop-only q-focus-helper"}),e._v(" "),a("span",{staticClass:"q-btn-inner row col flex-center"},[e._v("Download image")])])],1)},i=[],l={render:n,staticRenderFns:i};t.a=l},92:function(e,t,a){"use strict";var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{attrs:{id:"q-app"}},[a("QLayout",{attrs:{view:"hHh Lpr lFf"}},[a("QToolbar",{attrs:{slot:"header"},slot:"header"},[a("QToolbarTitle",[a("a",{staticClass:"home",attrs:{href:"https://placeholderimage.dev"}},[a("QIcon",{staticStyle:{"font-size":"2rem","margin-right":"5px"},attrs:{name:"photo"}}),a("span",[e._v("Placeholder image generator")])],1)]),e._v(" "),a("a",{staticClass:"gh-url",attrs:{href:"https://github.com/bendera/placeholder"}},[a("QIcon",{attrs:{name:"ion-social-github"}})],1)],1),e._v(" "),a("ImageParamsForm")],1)],1)},i=[],l={render:n,staticRenderFns:i};t.a=l}},[18]);