https://www.imgkits.com/_nuxt/pixel-art-DCd51AS9-28.js

1import te from"./LandingPageCrumbs-Bsvct2Gr-28.js";import{_ as se}from"./NuxtImg-Bc55eaXM-28.js";import{a0 as H,ab as oe,r as u,w as ae,o as le,c as h,a1 as P,e,a5 as a,ah as z,a4 as V,z as r,a6 as ie,ae as E,ag as N,q as T,_ as U,ac as W,al as ne,b}from"./core-i18n-CvkTSGFb-28.js";import{u as re}from"./asyncData-AfXlcxi8-28.js";import{q as de,u as ce}from"#entry";import{_ as pe}from"./_plugin-vue_export-helper-DlAUqK2U-28.js";import"./client-only-p3YJzr1V-28.js";import"./lazy-icons-B1O2ft2Z-28.js";import"./util-lodash-EiWJhHUB-28.js";const ge={class:"min-h-screen pt-20 bg-gray-50 text-gray-800"},ue={class:"container mx-auto px-3 py-4 max-w-5xl"},me={class:"text-center text-2xl md:text-4xl font-pixel mb-2 text-gray-800 pixel-title"},_e={class:"text-center text-sm md:text-base mb-4 text-gray-600"},xe={class:"grid grid-cols-1 lg:grid-cols-2 gap-4 mt-6"},he={class:"bg-white p-4 rounded-lg border-2 border-dashed border-blue-200 shadow-md hover:shadow-lg transition-shadow duration-300"},be={key:0,class:"text-center p-4"},fe={class:"text-base text-gray-800 mb-2"},ve={class:"text-xs text-gray-500"},we={class:"mt-3 text-xs text-gray-400"},ye={key:1,class:"w-full p-2"},ke={class:"bg-white p-4 rounded-lg border-2 border-blue-200 shadow-md"},$e={class:"min-h-[250px] flex flex-col items-center justify-center rounded-lg"},Ce={key:0,class:"text-center p-4"},Ie={class:"text-base text-gray-400"},Me={key:1,class:"text-center p-4"},De={class:"text-base text-blue-600"},Se={key:2,class:"w-full p-2"},je={class:"mt-3 flex justify-center"},Ae=["href"],Le={class:"mt-4 bg-white p-4 rounded-lg shadow-md border border-gray-100"},Pe={class:"text-lg text-gray-800 mb-3 flex items-center font-medium"},ze={class:"grid grid-cols-1 md:grid-cols-2 gap-4"},Ve={class:"bg-gray-50 p-3 rounded-lg"},Ee={class:"block text-xs text-gray-700 mb-2"},Te={class:"flex justify-between text-xs text-gray-500 mt-1"},Ue={class:"bg-gray-50 p-3 rounded-lg"},Fe={class:"block text-xs text-gray-700 mb-2"},Re={class:"flex flex-wrap gap-1"},Be=["onClick"],He={class:"mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"},Ne={class:"bg-gray-50 p-3 rounded-lg"},We={class:"block text-xs text-gray-700 mb-2"},qe={class:"bg-gray-50 p-3 rounded-lg"},Je={class:"block text-xs text-gray-700 mb-2"},Oe={class:"flex items-center"},Ge={for:"dithering",class:"ml-2 text-xs text-gray-700"},Ke={class:"mt-4 text-center"},Qe=["disabled"],Xe={class:"mt-6 mb-8"},Ye={class:"text-lg text-gray-800 text-center mb-3 font-medium"},Ze={class:"grid grid-cols-2 md:grid-cols-4 gap-3"},et={class:"mt-12 mb-16 bg-white rounded-xl shadow-md overflow-hidden"},tt={class:"p-4 sm:p-6 lg:p-8"},st={class:"info-section"},ot={class:"text-xl text-gray-800 font-semibold mb-4 border-b border-gray-200 pb-2"},at={class:"prose prose-blue max-w-none"},lt={class:"text-gray-600 leading-relaxed"},it={class:"text-gray-600 leading-relaxed mt-3"},nt={class:"text-gray-600 leading-relaxed mt-3"},rt={class:"info-section mt-8"},dt={class:"text-xl text-gray-800 font-semibold mb-4 border-b border-gray-200 pb-2"},ct={class:"prose prose-blue max-w-none"},pt={class:"text-gray-600 leading-relaxed"},gt={class:"info-section mt-8"},ut={class:"text-xl text-gray-800 font-semibold mb-4 border-b border-gray-200 pb-2"},mt={class:"prose prose-blue max-w-none"},_t={class:"text-gray-600 leading-relaxed"},xt={class:"info-section mt-8"},ht={class:"text-xl text-gray-800 font-semibold mb-4 border-b border-gray-200 pb-2"},bt={class:"prose prose-blue max-w-none"},ft={class:"text-gray-600 leading-relaxed"},vt={__name:"pixel-art",async setup(wt){let D,F;const{t:S,locale:q}=H(),R=H(),{data:J}=([D,F]=oe(()=>re("i18n_pixel_art",()=>$fetch(`https://public.imgkits.com/imgkits_language/pixel/${q.value}.json`))),D=await D,F(),D);R.mergeLocaleMessage(R.locale.value,J.value);const B=u(null),g=u(null),I=u(null),v=u(!1),j=u(!1),w=u(8),y=u("default"),k=u(50),A=u(!1),O=[{label:"pixel_art.settings.colorMode.options.default",value:"default"},{label:"pixel_art.settings.colorMode.options.retro",value:"retro"},{label:"pixel_art.settings.colorMode.options.gameboy",value:"gameboy"},{label:"pixel_art.settings.colorMode.options.bw",value:"bw"}],G=()=>{B.value.click()},K=t=>{const s=t.target.files[0];if(s&&s.type.startsWith("image/")){const d=new FileReader;d.onload=n=>{g.value=n.target.result},d.readAsDataURL(s)}},Q=t=>{j.value=!1;const s=t.dataTransfer.files[0];if(s&&s.type.startsWith("image/")){const d=new FileReader;d.onload=n=>{g.value=n.target.result},d.readAsDataURL(s)}},X=()=>{g.value=null,I.value=null},$=()=>{if(!g.value)return;v.value=!0;const t=new Image;t.onload=()=>{const s=document.createElement("canvas"),d=s.getContext("2d"),n=800;let o=t.width,c=t.height;o>c&&o>n?(c=c*n/o,o=n):c>n&&(o=o*n/c,c=n),s.width=o,s.height=c,d.drawImage(t,0,0,o,c),d.getImageData(0,0,o,c);const f=document.createElement("canvas"),L=f.getContext("2d"),m=Math.floor(o/w.value),_=Math.floor(c/w.value);if(f.width=m,f.height=_,L.drawImage(t,0,0,m,_),y.value!=="default"){const p=L.getImageData(0,0,m,_),l=p.data;for(let i=0;i<l.length;i+=4)if(y.value==="retro")l[i]=Math.round(l[i]/64)*64,l[i+1]=Math.round(l[i+1]/64)*64,l[i+2]=Math.round(l[i+2]/64)*64;

1else if(y.value==="gameboy"){const M=(l[i]+l[i+1]+l[i+2])/3;M<64?(l[i]=8,l[i+1]=24,l[i+2]=32):M<128?(l[i]=48,l[i+1]=104,l[i+2]=80):M<192?(l[i]=136,l[i+1]=192,l[i+2]=112):(l[i]=224,l[i+1]=248,l[i+2]=208)}else if(y.value==="bw"){const M=(l[i]+l[i+1]+l[i+2])/3,Z=A.value?i/4%2===0?128:192:128,ee=M<Z?0:255;l[i]=l[i+1]=l[i+2]=ee}L.putImageData(p,0,0)}const C=document.createElement("canvas"),x=C.getContext("2d");if(C.width=o,C.height=c,x.imageSmoothingEnabled=!1,x.drawImage(f,0,0,m,_,0,0,o,c),k.value>0){const p=x.getImageData(0,0,o,c),l=Y(p,k.value/100);x.putImageData(l,0,0)}I.value=C.toDataURL("image/png"),v.value=!1},t.src=g.value},Y=(t,s)=>{const d=t.data,n=t.width,o=t.height,c=s*.5,f=new Uint8ClampedArray(d);for(let m=1;m<o-1;m++)for(let _=1;_<n-1;_++){const C=(m*n+_)*4;for(let x=0;x<3;x++){const p=C+x;f[p]=Math.min(255,Math.max(0,d[p]*(1+4*c)-c*(d[p-n*4]+d[p-4]+d[p+4]+d[p+n*4])))}}return new ImageData(f,n,o)};return ae(g,t=>{t&&$()}),le(()=>{"requestIdleCallback"in window?de(()=>{const t=document.createElement("link");t.rel="stylesheet",t.href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap",document.head.appendChild(t)},{timeout:3e3}):setTimeout(()=>{const t=document.createElement("link");t.rel="stylesheet",t.href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap",document.head.appendChild(t)},2e3)}),ce({title:S("pixel_art.meta.page_title"),script:[{type:"application/ld+json",innerHTML:JSON.stringify({"@context":"https://schema.org","@type":"WebApplication","@id":"https://www.imgkits.com/pixel-art#webapplication",name:S("pixel_art.meta.page_title"),url:"https://www.imgkits.com/pixel-art",description:S("pixel_art.meta.description"),applicationCategory:"MultimediaApplication",operatingSystem:"Web",provider:{"@id":"https://www.imgkits.com/#organization"}})}],meta:[{name:"keywords",content:""},{name:"description",content:S("pixel_art.meta.description")},{property:"og-site_name",content:"Images to Pixel Art"},{property:"og:title",content:"Transform Images into Stunning Pixel Art | Imgkits"},{property:"og:image",content:""},{property:"og:description",content:"Make pixel art from any photo in seconds with imgkits. Free, simple, and fun—turn your pictures into retro pixel masterpieces!"}]}),(t,s)=>{const d=te,n=se;return b(),h(U,null,[P(d,{items:[{title:t.$t("tabnewtitle.effect"),path:"/?tab=imgeffect"},{title:t.$t("pixel_art.title").split("-")[0],path:"/"}]},null,8,["items"]),e("div",ge,[e("div",ue,[e("h1",me,a(t.$t("pixel_art.title")),1),e("p",_e,a(t.$t("pixel_art.subtitle")),1),e("div",xe,[e("div",he,[e("div",{class:V(["min-h-[250px] flex flex-col items-center justify-center cursor-pointer rounded-lg",{"bg-blue-50 border border-blue-300":r(j)}]),onClick:G,onDrop:z(Q,["prevent"]),onDragover:s[0]||(s[0]=z(o=>j.value=!0,["prevent"])),onDragleave:s[1]||(s[1]=z(o=>j.value=!1,["prevent"]))},[r(g)?(b(),h("div",ye,[P(n,{src:r(g),alt:"Source image",class:"max-h-[220px] mx-auto rounded-md object-contain"},null,8,["src"]),e("button",{onClick:z(X,["stop"]),class:"mt-3 bg-red-500 hover:bg-red-600 text-white py-1 px-3 rounded-md mx-auto block text-xs"},a(t.$t("pixel_art.upload_section.clear_image_button")),1)])):(b(),h("div",be,[s[5]||(s[5]=e("div",{class:"w-14 h-14 mx-auto mb-3 bg-blue-50 p-2 rounded-full"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",class:"w-full h-full text-blue-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"})])],-1)),e("p",fe,a(t.$t("pixel_art.upload_section.click_to_upload")),1),e("p",ve,a(t.$t("pixel_art.upload_section.drop_instruction")),1),e("p",we,a(t.$t("pixel_art.upload_section.supported_formats")),1)]))],34),e("input",{ref_key:"fileInput",ref:B,type:"file",accept:"image/*",class:"hidden",onChange:K},null,544)]),e("div",ke,[e("div",$e,[!r(I)&&!r(v)?(b(),h("div",Ce,[s[6]||(s[6]=e("div",{class:"w-14 h-14 mx-auto mb-3 opacity-50 bg-gray-100 p-2 rounded-full"},[e("svg",{xmlns:"http://www.w3.org/2000/svg",class:"w-full h-full text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"})])],-1)),e("p",Ie,a(t.$t("pixel_art.result_section.placeholder_text")),1)])):r(v)?(b(),h("div",Me,[s[7]||(s[7]=e("div",{class:"pixel-loading mb-3"},null,-1)),e("p",De,a(t.$t("pixel_art.result_section.processing_text")),1)])):(b(),h("div",Se,[P(n,{src:r(I),alt:"Pixelated image",class:"max-h-[220px] mx-auto rounded-md object-contain pixelated-result"},null,8,["src"]),e("div",je,[e("a",{href:r(I),download:"pixel-art.png",class:"bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded-md text-xs"},a(t.$t("pixel_art.result_section.download_button")),9,Ae)])]))])])]),e("div",Le,[e("h2",Pe,[s[8]||(s[8]=e("span",{class:"inline-block w-4 h-4 bg-blue-500 mr-2"},null,-1)),ie(" "+a(t.$t("pixel_art.settings_section.title")),1)]),e("div",ze,[e("div",Ve,[e("label",Ee,a(t.$t("pixel_art.settings_section.pixel_size.label"))+": "+a(r(w)),1),E(e("input",{type:"range","onUpdate:modelValue":s[2]||(s[2]=o=>T(w)?w.value=o:null),min:"2",max:"32",class:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer",onChange:$},null,544),[[N,r(w)]]),e("div",Te,[e("span",null,a(t.$t("pixel_art.settings_section.pixel_size.small_label")),1),e("span",null,a(t.$t("pixel_art.settings_section.pixel_size.large_label")),1)])]),e("div",Ue,[e("label",Fe,a(t.$t("pixel_art.settings_section.color_mode.label")),1),e("div",Re,[(b(),h(U,null,W(O,o=>e("button",{key:o.value,onClick:c=>{y.value=o.value,$()},class:V(["px-2 py-1 text-xs rounded-md transition-colors duration-200",r(y)===o.value?"bg-blue-500 text-white":"bg-gray-200 text-gray-700 hover:bg-gray-300"])},a(t.$t(`pixel_art.settings_section.color_mode.options.${o.value}`)),11,Be)),64))])])]),e("div",He,[e("div",Ne,[e("label",We,a(t.$t("pixel_art.settings_section.sharpness.label"))+": "+a(r(k)),1),E(e("input",{type:"range","onUpdate:modelValue":s[3]||(s[3]=o=>T(k)?k.value=o:null),min:"0",max:"100",class:"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer",onChange:$},null,544),[[N,r(k)]])]),e("div",qe,[e("label",Je,a(t.$t("pixel_art.settings_section.dithering.label")),1),e("div",Oe,[

1E(e("input",{type:"checkbox",id:"dithering","onUpdate:modelValue":s[4]||(s[4]=o=>T(A)?A.value=o:null),class:"w-3 h-3 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500",onChange:$},null,544),[[ne,r(A)]]),e("label",Ge,a(t.$t("pixel_art.settings_section.dithering.checkbox_label")),1)])])]),e("div",Ke,[e("button",{onClick:$,class:V(["bg-blue-500 hover:bg-blue-600 text-white font-pixel py-2 px-6 rounded-md pixel-btn text-sm transition-all duration-200",{"opacity-50 cursor-not-allowed":!r(g)||r(v)}]),disabled:!r(g)||r(v)},a(t.$t("pixel_art.settings_section.generate_button")),11,Qe)])]),e("div",Xe,[e("h2",Ye,a(t.$t("pixel_art.examples_section.title")),1),e("div",Ze,[(b(),h(U,null,W(4,o=>e("div",{key:o,class:"bg-white p-2 rounded-lg shadow-sm pixelated-example"},[P(n,{src:`https://public.imgkits.com/pixel_art_demo${o}.webp`,alt:"Pixel art example",class:"w-full rounded-md"},null,8,["src"])])),64))])]),e("div",et,[e("div",tt,[e("div",st,[e("h2",ot,a(t.$t("pixel_art.info_sections.what_is.title")),1),e("div",at,[e("p",lt,a(t.$t("pixel_art.info_sections.what_is.content[0]")),1),e("p",it,a(t.$t("pixel_art.info_sections.what_is.content[1]")),1),e("p",nt,a(t.$t("pixel_art.info_sections.what_is.content[2]")),1)])]),e("div",rt,[e("h2",dt,a(t.$t("pixel_art.info_sections.palette.title")),1),e("div",ct,[e("p",pt,a(t.$t("pixel_art.info_sections.palette.content[0]")),1)])]),e("div",gt,[e("h2",ut,a(t.$t("pixel_art.info_sections.download.title")),1),e("div",mt,[e("p",_t,a(t.$t("pixel_art.info_sections.download.content[0]")),1)])]),e("div",xt,[e("h2",ht,a(t.$t("pixel_art.info_sections.feedback.title")),1),e("div",bt,[e("p",ft,a(t.$t("pixel_art.info_sections.feedback.content[0]")),1)])]),s[9]||(s[9]=e("div",{class:"absolute right-4 bottom-4 opacity-10"},[e("div",{class:"w-24 h-24 pixelated-decoration"})],-1))])])])])],64)}}},At=pe(vt,[["__scopeId","data-v-e4d2b859"]]);export{At as default};