Uno de los dolores de cabeza más comunes para los estudiantes universitarios es el límite estricto de tamaño de archivos en plataformas escolares como Moodle (a menudo limitado a 2MB o 5MB por entrega).

Al escanear tareas o guías con la cámara del celular, un documento en PDF fácilmente puede pesar entre 10MB y 25MB. La solución tradicional requiere subir el archivo a una web externa con publicidad molesta o pagar una suscripción.

En **MoodleSync**, decidimos resolver este problema **100% en el navegador del usuario**, sin enviar los documentos a ningún servidor.

¿Por qué procesar client-side?

1. **Privacidad total:** Los documentos escolares del estudiante nunca salen de su dispositivo. 2. **Cero costo de servidor:** No hay gasto de ancho de banda ni servidores procesando imágenes. 3. **Velocidad:** En dispositivos modernos, el procesamiento toma entre 2 y 4 segundos.

La estrategia de optimización

El flujo de compresión funciona renderizando cada página del PDF en un `<canvas>` oculto en memoria y re-encodificándolo en WebP/JPEG con calidad ajustada:

// 1. Cargar el documento PDF con PDF.js

// 2. Iterar por cada página y renderizar a Canvas for (let i = 1; i <= pdf.numPages; i++) { const page = await pdf.getPage(i); const viewport = page.getViewport({ scale: 1.2 }); // Escala optimizada const canvas = document.createElement("canvas"); canvas.width = viewport.width; canvas.height = viewport.height; await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise; // 3. Exportar como imagen comprimida const imageUri = canvas.toDataURL("image/jpeg", 0.72); // 72% de calidad // ... reconstruir el nuevo PDF comprimido } ```

Resultados

- Archivos de **18 MB** escaneados con celular se reducen a **~850 KB** en menos de 3.5 segundos. - La legibilidad del texto se mantiene perfecta para revisión de profesores. - Cero fallas por límites de servidor durante picos de entrega de tareas.

A veces la mejor optimización de backend es no usar backend en absoluto.