Image Converter

Convert WebP to PNG (or any image format to PNG)

\n \n \n
\n
\n {isLoading && Converting your image...}\n {convertedImage && (\n

Converted Image:

\n Download PNG\n \n

\n
\n $\"Converted\"$ \n

\n )}\n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Image Converter\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nexport default server;","createdAt",["D",1726655404958],"version",27,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","macro21kgb","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGtZS0J5WXJxb1Mwd3lrN3hDZksxRmxSQWcifQ","forkedVal","interval","slug","macro21kgb/imageConverterSite","description","@jsxImportSource https://esm.sh/react","versions",[141,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,243,247],{"_118":119,"_142":-5,"_116":143,"_113":111},"prId",["D",1726655404958],{"_118":145,"_142":-5,"_116":146,"_113":147},26,["D",1726655377306],"e7a50464-75a8-11ef-8d84-de64eea55b61",{"_118":149,"_142":-5,"_116":150,"_113":151},25,["D",1726655362072],"de908a42-75a8-11ef-ae5f-de64eea55b61",{"_118":153,"_142":-5,"_116":154,"_113":155},24,["D",1726655339796],"d1496872-75a8-11ef-ae5f-de64eea55b61",{"_118":157,"_142":-5,"_116":158,"_113":159},23,["D",1726655210544],"843f4fb0-75a8-11ef-b446-de64eea55b61",{"_118":161,"_142":-5,"_116":162,"_113":163},22,["D",1726655204160],"807133d0-75a8-11ef-a6e8-de64eea55b61",{"_118":165,"_142":-5,"_116":166,"_113":167},21,["D",1726655186015],"75a07290-75a8-11ef-976f-de64eea55b61",{"_118":169,"_142":-5,"_116":170,"_113":171},20,["D",1726655159805],"660123a2-75a8-11ef-b202-de64eea55b61",{"_118":173,"_142":-5,"_116":174,"_113":175},19,["D",1726655130412],"547c3018-75a8-11ef-b9e5-de64eea55b61",{"_118":177,"_142":-5,"_116":178,"_113":179},18,["D",1726655092674],"3dfdede0-75a8-11ef-ab63-de64eea55b61",{"_118":181,"_142":-5,"_116":182,"_113":183},17,["D",1726655091566],"3d54c4ea-75a8-11ef-b99f-de64eea55b61",{"_118":185,"_142":-5,"_116":186,"_113":187},16,["D",1726655084514],"392099e4-75a8-11ef-a3b2-de64eea55b61",{"_118":189,"_142":-5,"_116":190,"_113":191},15,["D",1726655080052],"3677bc9a-75a8-11ef-b293-de64eea55b61",{"_118":193,"_142":-5,"_116":194,"_113":195},14,["D",1726655072261],"31d2ebce-75a8-11ef-9c58-de64eea55b61",{"_118":197,"_142":-5,"_116":198,"_113":199},13,["D",1726655070675],"30e0faee-75a8-11ef-9e3a-de64eea55b61",{"_118":201,"_142":-5,"_116":202,"_113":203},12,["D",1726655066448],"2e5be9d2-75a8-11ef-ae5f-de64eea55b61",{"_118":205,"_142":-5,"_116":206,"_113":207},11,["D",1726655062195],"2bd315a0-75a8-11ef-9e3a-de64eea55b61",{"_118":209,"_142":-5,"_116":210,"_113":211},10,["D",1726655053321],"2688f042-75a8-11ef-b293-de64eea55b61",{"_118":213,"_142":-5,"_116":214,"_113":215},9,["D",1726655013443],"0ec3ec8c-75a8-11ef-b293-de64eea55b61",{"_118":217,"_142":-5,"_116":218,"_113":219},8,["D",1726654948056],"e7ca9a18-75a7-11ef-8d54-de64eea55b61",{"_118":221,"_142":-5,"_116":222,"_113":223},7,["D",1726654939105],"e27504b8-75a7-11ef-b365-de64eea55b61",{"_118":225,"_142":-5,"_116":226,"_113":227},6,["D",1726654873671],"bb74a94a-75a7-11ef-9e3a-de64eea55b61",{"_118":229,"_142":-5,"_116":230,"_113":231},5,["D",1726654815033],"9881023a-75a7-11ef-a6cf-de64eea55b61",{"_118":233,"_142":-5,"_116":234,"_113":235},4,["D",1726654655239],"39424ab8-75a7-11ef-89d5-de64eea55b61",{"_118":237,"_142":-5,"_116":238,"_113":239},3,["D",1726654640874],"30b270c6-75a7-11ef-b977-de64eea55b61",{"_118":90,"_142":-5,"_116":241,"_113":242},["D",1726654508847],"e200c2de-75a6-11ef-ac1e-de64eea55b61",{"_118":244,"_142":-5,"_116":245,"_113":246},1,["D",1726653940934],"8f802582-75a5-11ef-ab06-de64eea55b61",{"_118":31,"_142":-5,"_116":248,"_113":249},["D",1726652582934],"6611ad04-75a2-11ef-b9e0-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":257,"_258":259,"_94":260},"single","redirect","/v/macro21kgb/imageConverterSite/versions",{"_113":211,"_114":261,"_118":209,"_116":262,"_263":99,"_100":101,"_108":109,"_129":130,"_11":96,"_264":-5,"_265":-5,"_266":-5,"_254":26,"_135":136},"/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction App() {\n const [selectedFile, setSelectedFile] = useState(null);\n const [convertedImage, setConvertedImage] = useState(null);\n\n const handleFileChange = (event) => {\n setSelectedFile(event.target.files[0]);\n setConvertedImage(null);\n };\n\n const convertImage = () => {\n if (!selectedFile) {\n alert(\"Please select a file first.\");\n return;\n }\n\n const reader = new FileReader();\n reader.onload = (e) => {\n const img = new Image();\n img.onload = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = img.width;\n canvas.height = img.height;\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(img, 0, 0);\n canvas.toBlob((blob) => {\n setConvertedImage(URL.createObjectURL(blob));\n }, \"image/png\");\n };\n img.src = e.target.result;\n };\n reader.readAsDataURL(selectedFile);\n };\n\n return (\n

Image Converter

Convert WebP to PNG (or any image format to PNG)

\n \n \n {!convertedImage && (\n

\n Download PNG\n \n

Converted Image:

\n $\"Converted\"$ \n

\n )}\n

\n \n View Source\n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nexport default server;",["D",1726655053321],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

imageConverterSite

Version 10