Image to Text Converter
Upload an image to extract text (PNG, JPG, etc.)
Drag & Drop an image here or click to browse
Extracted text will appear here...const dropArea = document.getElementById(‘drop-area’); const uploadInput = document.getElementById(‘upload’); const output = document.getElementById(‘output’); const copyBtn = document.getElementById(‘copy-btn’); const progress = document.getElementById(‘progress’); // Prevent default drag behaviors [‘dragenter’, ‘dragover’, ‘dragleave’, ‘drop’].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } // Highlight drop area when dragging [‘dragenter’, ‘dragover’].forEach(eventName => { dropArea.addEventListener(eventName, highlight, false); }); [‘dragleave’, ‘drop’].forEach(eventName => { dropArea.addEventListener(eventName, unhighlight, false); }); function highlight() { dropArea.classList.add(‘highlight’); } function unhighlight() { dropArea.classList.remove(‘highlight’); } // Handle dropped files dropArea.addEventListener(‘drop’, handleDrop, false); dropArea.addEventListener(‘click’, () => uploadInput.click()); uploadInput.addEventListener(‘change’, handleFiles); function handleDrop(e) { const dt = e.dataTransfer; const files = dt.files; handleFiles({ target: { files } }); } function handleFiles(e) { const file = e.target.files[0]; if (!file) return; progress.textContent = “Processing…”; output.textContent = “”; copyBtn.disabled = true; Tesseract.recognize( file, ‘eng’, // Language (English by default) { logger: m => { if (m.status === ‘recognizing text’) { progress.textContent = `Progress: ${Math.round(m.progress * 100)}%`; } } } ).then(({ data: { text } }) => { output.textContent = text; progress.textContent = “Done!”; copyBtn.disabled = false; }).catch(err => { console.error(err); progress.textContent = “Error extracting text.”; }); } // Copy text to clipboard copyBtn.addEventListener(‘click’, () => { navigator.clipboard.writeText(output.textContent) .then(() => { copyBtn.textContent = “Copied!”; setTimeout(() => copyBtn.textContent = “Copy Text”, 2000); }); });
About The Author
