/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [isDragging, setIsDragging] = useState(false); const [jsonResult, setJsonResult] = useState(null); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); }; const handleDragLeave = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); }; const handleDrop = async (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); setError(""); setLoading(true); const file = e.dataTransfer.files[0]; if (!file || !file.type.startsWith('image/png')) { setError("Please drop a PNG image file"); setLoading(false); return; } if (file.size > 5 * 1024 * 1024) { // 5MB limit setError("Image is too large. Please use an image under 5MB."); setLoading(false); return; } try { // Get base64 of the file const base64 = await new Promise((resolve) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.readAsDataURL(file); }); // Get metadata from server const formData = new FormData(); formData.append('image', file); const response = await fetch('?process=true', { method: 'POST', body: formData }); if (!response.ok) { throw new Error(await response.text()); } const metadata = await response.json(); // Combine metadata with base64 setJsonResult({ ...metadata, base64: base64 as string }); } catch (err) { setError(err.message); } finally { setLoading(false); } }; return (

PNG to Base64 Converter

📄

{loading ? 'Processing...' : 'Drag and drop a PNG image here'}

Maximum file size: 5MB

{error &&

{error}

} {jsonResult && (

Result:

Width: {jsonResult.width}px

Height: {jsonResult.height}px

File Size: {(jsonResult.fileSize / 1024).toFixed(2)}KB

Base64:

 (e.target as HTMLTextAreaElement).select()}
            />
          </div>
        </div>
      )}
      
      <footer>
        <a href={import.meta.url.replace("esm.town", "val.town")}>View Source</a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") { client(); }

export default async function server(req: Request): Promise<Response> {
  // Handle image processing
  if (req.method === 'POST' && new URL(req.url).searchParams.get('process')) {
    try {
      const formData = await req.formData();
      const imageFile = formData.get('image') as File;
      
      if (!imageFile) {
        return new Response('No image provided', { status: 400 });
      }

      if (!imageFile.type.startsWith('image/png')) {
        return new Response('Only PNG images are supported', { status: 400 });
      }

      const arrayBuffer = await imageFile.arrayBuffer();
      const bytes = new Uint8Array(arrayBuffer);

      // Read PNG header to verify it's a valid PNG and get dimensions
      if (bytes.length < 24 || 
          bytes[0] !== 0x89 || bytes[1] !== 0x50 || bytes[2] !== 0x4E || bytes[3] !== 0x47) {
        return new Response('Invalid PNG file', { status: 400 });
      }

      // PNG width is stored in bytes 16-19, height in 20-23
      const width = (bytes[16] << 24) | (bytes[17] << 16) | (bytes[18] << 8) | bytes[19];
      const height = (bytes[20] << 24) | (bytes[21] << 16) | (bytes[22] << 8) | bytes[23];

      return new Response(JSON.stringify({
        width,
        height,
        fileSize: bytes.length,
        type: imageFile.type,
        name: imageFile.name
      }), {
        headers: {
          'Content-Type': 'application/json'
        }
      });

    } catch (error) {
      return new Response(`Failed to process image: ${error.message}`, { status: 500 });
    }
  }

  // Serve the main HTML page
  return new Response(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>PNG to Base64 Converter</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "content-type": "text/html" }
  });
}

const css = `
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: #f5f5f5;
    color: #333;
  }
  
  .container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
  }
  
  .dropzone {
    border: 3px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s ease;
    background: white;
    cursor: pointer;
  }
  
  .dropzone.dragging {
    border-color: #2196f3;
    background: #e3f2fd;
  }
  
  .dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .icon {
    font-size: 3rem;
  }
  
  .error {
    color: #d32f2f;
    margin: 1rem 0;
    padding: 0.5rem;
    background: #ffebee;
    border-radius: 4px;
  }
  
  .result {
    margin-top: 2rem;
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .result-preview {
    text-align: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
  }
  
  .result-info {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
  }
  
  .result-base64 textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    resize: vertical;
  }
  
  footer {
    margin-top: 2rem;
    text-align: center;
  }
  
  footer a {
    color: #666;
    text-decoration: none;
  }
  
  footer a:hover {
    text-decoration: underline;
  }
`;</article></body></html>

png64

Versions

v0