Realcreaciones/Imagentxt

Conversor de Imagen a Texto

    <div class="language-select">
        <label for="language">Seleccionar idioma:</label>
        <select id="language">
            <option value="spa">Español</option>
            <option value="eng">Inglés</option>
            <option value="fra">Francés</option>
            <option value="deu">Alemán</option>
            <option value="ita">Italiano</option>
            <option value="por">Portugués</option>
            <option value="cat">Catalán</option>
            <option value="rus">Ruso</option>
            <option value="chi_sim">Chino Simplificado</option>
            <option value="jpn">Japonés</option>
        </select>
    </div>
    
    <div id="dropArea" class="upload-area">
        <p>Arrastra y suelta una imagen aquí o haz clic para seleccionar</p>
        <input type="file" id="fileInput" accept="image/*" style="display: none;">
    </div>
    
    <img id="imagePreview" src="" alt="Vista previa de la imagen">
    
    <div class="progress-bar" id="progressBar">
        <div class="progress" id="progress">0%</div>
    </div>
    
    <div class="btn-container">
        <button id="convertBtn" disabled>Convertir a Texto</button>
        <button id="copyBtn" class="copy-btn" disabled>Copiar Texto</button>
    </div>
    
    <p id="status">Listo para procesar imagen</p>
    
    <div id="result">El texto extraído aparecerá aquí...</div>
</div>

<script>
    // Elementos del DOM
    const dropArea = document.getElementById('dropArea');
    const fileInput = document.getElementById('fileInput');
    const imagePreview = document.getElementById('imagePreview');
    const convertBtn = document.getElementById('convertBtn');
    const copyBtn = document.getElementById('copyBtn');
    const result = document.getElementById('result');
    const progressBar = document.getElementById('progressBar');
    const progress = document.getElementById('progress');
    const status = document.getElementById('status');
    const languageSelect = document.getElementById('language');
    
    // Variables globales
    let selectedFile = null;
    
    // Eventos para arrastrar y soltar
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });
    
    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });
    
    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });
    
    function highlight() {
        dropArea.classList.add('active');
    }
    
    function unhighlight() {
        dropArea.classList.remove('active');
    }
    
    // Manejo de archivos soltados
    dropArea.addEventListener('drop', handleDrop, false);
    
    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        
        if (files.length > 0 && files[0].type.match('image.*')) {
            handleFiles(files);
        }
    }
    
    // Click en el área de carga
    dropArea.addEventListener('click', () => {
        fileInput.click();
    });
    
    // Cuando se selecciona un archivo
    fileInput.addEventListener('change', (e) => {
        if (fileInput.files.length > 0) {
            handleFiles(fileInput.files);
        }
    });
    
    // Procesar archivos
    function handleFiles(files) {
        selectedFile = files[0];
        
        // Mostrar vista previa
        const reader = new FileReader();
        reader.onload = (e) => {
            imagePreview.src = e.target.result;
            imagePreview.style.display = 'block';
            convertBtn.disabled = false;
            status.textContent = 'Imagen cargada. Haz clic en "Convertir a Texto" para procesar.';
        };
        reader.readAsDataURL(selectedFile);
    }
    
    // Convertir imagen a texto
    convertBtn.addEventListener('click', () => {
        if (!selectedFile) return;
        
        const selectedLanguage = languageSelect.value;
        
        // Reiniciar estado
        result.textContent = 'Procesando...';
        copyBtn.disabled = true;
        progressBar.style.display = 'block';
        progress.style.width = '0%';
        progress.textContent = '0%';
        
        // Iniciar reconocimiento
        Tesseract.recognize(
            selectedFile,
            selectedLanguage,
            {
                logger: message => {
                    if (message.status === 'recognizing text') {
                        const p = message.progress * 100;
                        progress.style.width = `${p}%`;
                        progress.textContent = `${Math.round(p)}%`;
                        status.textContent = `Procesando: ${message.progress.toFixed(2) * 100}%`;
                    }
                }
            }
        ).then(({ data: { text } }) => {
            result.textContent = text || 'No se pudo detectar texto en la imagen.';
            copyBtn.disabled = text.trim() === '';
            status.textContent = 'Procesamiento completado!';
            progress.style.width = '100%';
            progress.textContent = '100%';
        }).catch(err => {
            result.textContent = `Error: ${err.message}`;
            status.textContent = 'Ha ocurrido un error durante el procesamiento.';
        });
    });
    
    // Copiar texto al portapapeles
    copyBtn.addEventListener('click', () => {
        const textToCopy = result.textContent;
        navigator.clipboard.writeText(textToCopy).then(() => {
            const originalText = copyBtn.textContent;
            copyBtn.textContent = 'Copiado!';
            setTimeout(() => {
                copyBtn.textContent = originalText;
            }, 2000);
        });
    });
</script>