PNG to Base64 Converter

\n \n
\n 📄\n
{loading ? 'Processing...' : 'Drag and drop a PNG image here'}
\n Maximum file size: 5MB\n
\n \n {error &&
{error}
}\n \n {jsonResult && (\n
Result:

\n $\"Preview\"$ \n
Width: {jsonResult.width}px
Height: {jsonResult.height}px
File Size: {(jsonResult.fileSize / 1024).toFixed(2)}KB
Base64:

 (e.target as HTMLTextAreaElement).select()}\n            />\n          </div>\n        </div>\n      )}\n      \n      <footer>\n        <a href={import.meta.url.replace(\"esm.town\", \"val.town\")}>View Source</a>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise<Response> {\n  // Handle image processing\n  if (req.method === 'POST' && new URL(req.url).searchParams.get('process')) {\n    try {\n      const formData = await req.formData();\n      const imageFile = formData.get('image') as File;\n      \n      if (!imageFile) {\n        return new Response('No image provided', { status: 400 });\n      }\n\n      if (!imageFile.type.startsWith('image/png')) {\n        return new Response('Only PNG images are supported', { status: 400 });\n      }\n\n      const arrayBuffer = await imageFile.arrayBuffer();\n      const bytes = new Uint8Array(arrayBuffer);\n\n      // Read PNG header to verify it's a valid PNG and get dimensions\n      if (bytes.length < 24 || \n          bytes[0] !== 0x89 || bytes[1] !== 0x50 || bytes[2] !== 0x4E || bytes[3] !== 0x47) {\n        return new Response('Invalid PNG file', { status: 400 });\n      }\n\n      // PNG width is stored in bytes 16-19, height in 20-23\n      const width = (bytes[16] << 24) | (bytes[17] << 16) | (bytes[18] << 8) | bytes[19];\n      const height = (bytes[20] << 24) | (bytes[21] << 16) | (bytes[22] << 8) | bytes[23];\n\n      return new Response(JSON.stringify({\n        width,\n        height,\n        fileSize: bytes.length,\n        type: imageFile.type,\n        name: imageFile.name\n      }), {\n        headers: {\n          'Content-Type': 'application/json'\n        }\n      });\n\n    } catch (error) {\n      return new Response(`Failed to process image: ${error.message}`, { status: 500 });\n    }\n  }\n\n  // Serve the main HTML page\n  return new Response(`\n    <!DOCTYPE html>\n    <html>\n      <head>\n        <title>PNG to Base64 Converter</title>\n        <meta charset=\"utf-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"content-type\": \"text/html\" }\n  });\n}\n\nconst css = `\n  body {\n    margin: 0;\n    font-family: system-ui, sans-serif;\n    background: #f5f5f5;\n    color: #333;\n  }\n  \n  .container {\n    max-width: 800px;\n    margin: 2rem auto;\n    padding: 0 1rem;\n  }\n  \n  .dropzone {\n    border: 3px dashed #ccc;\n    border-radius: 8px;\n    padding: 2rem;\n    text-align: center;\n    transition: all 0.2s ease;\n    background: white;\n    cursor: pointer;\n  }\n  \n  .dropzone.dragging {\n    border-color: #2196f3;\n    background: #e3f2fd;\n  }\n  \n  .dropzone-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 1rem;\n  }\n  \n  .icon {\n    font-size: 3rem;\n  }\n  \n  .error {\n    color: #d32f2f;\n    margin: 1rem 0;\n    padding: 0.5rem;\n    background: #ffebee;\n    border-radius: 4px;\n  }\n  \n  .result {\n    margin-top: 2rem;\n    background: white;\n    padding: 1rem;\n    border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n  \n  .result-preview {\n    text-align: center;\n    margin-bottom: 1rem;\n    padding: 1rem;\n    background: #f8f9fa;\n    border-radius: 4px;\n  }\n  \n  .result-info {\n    margin-bottom: 1rem;\n    padding: 1rem;\n    background: #f8f9fa;\n    border-radius: 4px;\n  }\n  \n  .result-base64 textarea {\n    width: 100%;\n    min-height: 100px;\n    padding: 0.5rem;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    font-family: monospace;\n    font-size: 12px;\n    resize: vertical;\n  }\n  \n  footer {\n    margin-top: 2rem;\n    text-align: center;\n  }\n  \n  footer a {\n    color: #666;\n    text-decoration: none;\n  }\n  \n  footer a:hover {\n    text-decoration: underline;\n  }\n`;","deleted","label",[99],"permalink","https://www.val.town/x/all/png64/code/main.tsx","extension","actionData","errors"]
</article></body></html>