nft-avatar/_nuxt/766da64.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[3,2],{219:function(t,e,n){var content=n(222);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,n(69).default)("bad8e090",content,!0,{sourceMap:!1})},220:function(t,e,n){"use strict";n.r(e);n(26),n(67);var o={data:function(){return{image:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=",hexagon:null}},mounted:function(){var image=new Image;image.src="/hexagon.png",this.hexagon=image;var t=this.$refs.outputCanvas.getContext("2d");image.onload=function(){t.drawImage(image,0,0,250,250)}},methods:{imageChange:function(t){var e=this,n=this,o=t.target.files||t.dataTransfer.files;if(o.length){var r=o[0],l=new FileReader;l.onload=function(t){n.image=t.target.result,e.generateImage()},l.readAsDataURL(r)}},generateImage:function(){var t=this.$refs.outputCanvas.getContext("2d");t.globalCompositeOperation="source-over",t.drawImage(this.hexagon,0,0,250,250),t.globalCompositeOperation="source-in";var image=new Image;image.onload=function(){t.drawImage(image,0,0,250,250)},image.src=this.image},downloadImage:function(){var t=this.$refs.outputCanvas.toDataURL("image/png").replace("image/png","image/octet-stream"),link=document.createElement("a");link.download="nft-avatar.png",link.href=t,link.click()}}},r=n(51),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"flex flex-col md:flex-row items-center justify-center"},[n("div",{staticClass:"flex flex-col justify-center items-center px-4"},[n("p",{staticClass:"text-yellow-400 font-semibold text-xl mb-2"},[t._v("upload")]),t._v(" "),n("div",{staticClass:"border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800"},[n("div",{staticClass:"container flex flex-col items-center"},[n("img",{ref:"uploadPreview",staticClass:"w-32 h-32 object-contain mb-4 rounded-full",attrs:{src:t.image}}),t._v(" "),n("input",{ref:"uploadFile",staticClass:"flex flex-row items-center justify-center",attrs:{type:"file",accept:"image/*"},on:{change:t.imageChange}})])])]),t._v(" "),n("div",{staticClass:"flex flex-col justify-center items-center px-4 mt-8 md:mt-0"},[n("p",{staticClass:"text-yellow-400 font-semibold text-xl mb-2"},[t._v("output")]),t._v(" "),n("div",{staticClass:"border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 bg-gray-800"},[n("div",{staticClass:"container flex flex-col items-center"},[n("canvas",{ref:"outputCanvas",staticClass:"mb-4 w-32 h-32",attrs:{width:"250",height:"250"}}),t._v(" "),n("a",{ref:"downloadButton",staticClass:"border-yellow-300 border-2 rounded-lg py-1 px-2 duration-200 hover:bg-yellow-300 hover:text-black font-semibold cursor-pointer",on:{click:t.downloadImage}},[t._v("Download Image")])])])])])}),[],!1,null,null,null);e.default=component.exports},221:function(t,e,n){"use strict";n(219)},222:function(t,e,n){var o=n(68)((function(i){return i[1]}));o.push([t.i,'/*purgecss start ignore*/\nbody{\n  background:#15202b;\n  font-family:"Roboto",sans-serif\n}\n\n/*purgecss end ignore*/',""]),o.locals={},t.exports=o},223:function(t,e,n){"use strict";n.r(e);var o=n(2).a.extend({}),r=(n(221),n(51)),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"mb-8"},[n("div",{staticClass:"max-w-5xl mx-auto mt-12"},[t._m(0),t._v(" "),n("ImageEditor")],1)])])}),[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"text-white text-center mb-8"},[n("img",{staticClass:"mx-auto h-24 mb-4",attrs:{src:"/logo.png"}}),t._v(" "),n("h1",{staticClass:"font-bold text-4xl"},[t._v("Twitter NFT Avatar")]),t._v(" "),n("p",{staticClass:"font-semibold text-xl"},[t._v("Give your profile picture a hexagonal shape without an NFT!")]),t._v(" "),n("p",{staticClass:"text-md mt-1"},[t._v("\n          Open source on "),n("a",{staticClass:"text-blue-500 hover:text-blue-600 transition duration-50",attrs:{href:"https://github.com/tandpfun/nft-avatar",target:"_blank"}},[t._v("GitHub")]),t._v(". Made by\n          "),n("a",{staticClass:"text-blue-500 hover:text-blue-600 transition duration-50",attrs:{href:"https://twitter.com/cdngdev",target:"_blank"}},[t._v("@cdngdev")]),t._v(".\n        ")])])}],!1,null,null,null);e.default=component.exports;installComponents(component,{ImageEditor:n(220).default})}}]);