Extrae imágenes de PDF sin dejar el navegador

Extraer imágenes de un PDF completamente en el navegador es posible desde hace años, pero pocas personas lo hacen. Usá PDF.js, renderizá cada página en un canvas y convertí el resultado a imagen. El archivo nunca sale de tu dispositivo, funciona sin conexión, y no pagás nada en infraestructura de servidor.

Qué es extraer imágenes de PDF en el navegador

PDF.js es una librería de Mozilla que permite procesar documentos PDF completamente en JavaScript, sin necesidad de un servidor backend. Cuando extraés imágenes desde el navegador, estás usando esta librería para parsear el PDF, renderizar cada página en un elemento canvas de HTML5, y convertir el resultado en una imagen descargable (JPG, PNG) que queda en tu disco.

Por qué procesar PDFs en el navegador es importante

Ponele que tenés un documento de un cliente con información financiera o personal. Necesitás extraer un gráfico. La solución tradicional: subir el archivo a un servidor, esperar a que se procese, descargar el resultado. Eso implica que el archivo viajó por la red, quedó en el servidor durante la operación, y confiaste en que después se borró (spoiler: a veces no lo hace).

Con procesamiento client-side, el PDF nunca sale de tu pantalla. Está en tu RAM, se renderiza, se convierte a imagen, vos descargas, y listo. Fue todo local. Según el análisis publicado hace poco, esto tiene cinco ventajas claras:

• Privacidad: Los archivos nunca salen del dispositivo. Crítico para documentos sensibles, personales, o confidenciales.
• Cero costos de infraestructura: Sin servidores que procesen PDFs, sin almacenamiento temporal, sin ancho de banda de salida.
• Sin latencia de red: El procesamiento es instantáneo. No esperas a que el archivo suba, se procese en el servidor, y baje.
• Modo offline: Una vez que la página cargó, funciona sin internet.
• Sin límites de tamaño: El PDF es tan grande como la RAM disponible en tu máquina. No hay límite de 50MB en el servidor.

Comparar esto con un servicio web tradicional es noche y día en términos de seguridad y eficiencia.

Arquitectura de la solución client-side

Una solución client-side para extraer imágenes de PDF se monta sobre tres pilares: PDF.js para parsear el documento, HTML5 Canvas para renderizar, y WebAssembly para optimizar si hace falta (aunque WebAssembly es opcional).

PDF.js carga el PDF y lo procesa en JavaScript puro. No requiere plugins, no requiere compilar código nativo, funciona en cualquier navegador moderno. Canvas es donde renderizás visualmente cada página del PDF (es como una pizarra blanca donde dibujás el contenido). Web Workers ejecutan el parsing del PDF en segundo plano, así la interfaz no se traba mientras procesás un documento de 100 páginas.

La secuencia es simple: usuario elige PDF → PDF.js obtiene el documento → itera sobre cada página → renderiza página en Canvas → Canvas se convierte a imagen → se descarga. Eso sí, hay que configurar el workerSrc correctamente, si no los errores de CORS te vuelven loco (ya te contaré sobre eso).

Implementación con PDF.js y Canvas

Acá viene el código. Es cortito.

Primero, necesitás cargar PDF.js. La forma más simple es usar el build CDN que Mozilla mantiene:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> Ya lo cubrimos antes en mantener la privacidad de tus datos.

(Fijate en el número de versión; 3.11.174 es de 2026 y es estable.)

Luego necesitás indicarle a PDF.js dónde está el Web Worker:

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

Después, cuando el usuario carga un archivo, lo procesás así:

const pdf = await pdfjsLib.getDocument(fileBuffer).promise; const page = await pdf.getPage(1); const viewport = page.getViewport({ scale: 2 }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; const context = canvas.getContext('2d'); await page.render({ canvasContext: context, viewport }).promise; const imageDataUrl = canvas.toDataURL('image/jpeg');

Eso renderiza la página 1 a 2x la escala original (resulta en mejor calidad de imagen) y te devuelve el resultado en base64. Cada página es independiente, así que iterás sobre todas.

getViewport() es importante: calcula las dimensiones correctas del canvas según el tamaño del PDF y la escala que vos elegís. scale: 2 significa renderizar al doble de la resolución original (más calidad, más lento). scale: 1 mantiene la resolución original del PDF.

Extracción y descarga de imágenes

Una vez que tenés el canvas convertido a imagen (base64), necesitás que el usuario lo descargue. Podés hacerlo con la librería FileSaver.js:

const blob = canvas.toBlob(function(blob) { saveAs(blob, `pagina_1.jpg`); });

Si querés descargar todas las páginas a la vez como un ZIP, usá una librería como JSZip. Cargás cada página en el ZIP, generás el archivo comprimido, y lo descargas:

const zip = new JSZip(); for (let i = 1; i <= pdf.numPages; i++) { const page = await pdf.getPage(i); const canvas = document.createElement('canvas'); // renderizar... const blob = await new Promise(r => canvas.toBlob(r, 'image/jpeg')); zip.file(`pagina_${i}.jpg`, blob); } zip.generateAsync({type:'blob'}).then(content => saveAs(content, 'imagenes.zip')); Lo explicamos a fondo en herramientas y tecnologías modernas.

La ventaja de hacerlo así (iterando página por página) es que no está todo en memoria de una vez. Procesás, guardás en el ZIP, borrás del RAM, pasás a la siguiente. Mucho más eficiente para PDFs grandes.

WebAssembly para mejor rendimiento

PDF.js funciona bien con renderizado estándar. Pero si manejás PDFs complejos (gráficos densamente vectorizados, fuentes exóticas, capas) o muy grandes (500+ páginas), WebAssembly acelera significativamente.

Nutrient (formerly PSPDFKit) publicó un análisis donde muestra que usando WebAssembly se logran velocidades de renderizado hasta 3-4x más rápidas en PDFs complejos. Pero esto es opcional; si tu caso de uso es simple (PDFs de texto con imágenes básicas), PDF.js puro es suficiente.

Si querés experimentar con WebAssembly, hay librerías como MuPDF-JS que ofrecen un binding de WebAssembly a MuPDF (el motor de renderizado que usan herramientas profesionales). Pero requiere compilar WASM, alojar el `.wasm` file en el servidor, y configurar headers CORS. Mucho más complejo que PDF.js.

Problemas comunes y soluciones

Acá va todo lo que puede salir mal (y saldrá, garantizado).

1. CORS error con pdf.worker.js

PDF.js usa Web Workers para no bloquear la interfaz. El worker es un script separado. Si no configurás `workerSrc` correctamente, obtenés un error CORS que es imposible de debuguear. El mensaje de error es genérico, el browser no te dice nada.

Solución: asegurate de que el `workerSrc` apunta a la URL correcta. Si usás una CDN, verificá que el dominio esté disponible. Si usás un archivo local, el path debe ser relativo correctamente. pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js'; si el archivo está en la raíz; './lib/pdf.worker.min.js' si está en una carpeta.

2. PDFs corruptos o con formatos raros

No todos los PDFs siguen el estándar al pie de la letra. Algunos están encriptados con contraseña (PDF.js requiere que las proveas programáticamente). Otros tienen estructura interna rota. Otros usan formatos de compresión que no están soportados.

PDF.js falla silenciosamente en la mayoría de estos casos. getDocument() devuelve una promesa, pero a veces no rechaza la promesa ni resuelve bien. Necesitás envolver todo en try-catch y validar que cada step funcione. Además, agregá un timeout; si un PDF es demasiado complejo, PDF.js puede tardar minutos en parsearlo.

3. Memory leak en PDFs grandes

Si iterás sobre las 500 páginas de un PDF sin liberar memoria, en algún momento el browser se queda sin RAM y se cuelga (y a veces crashea la pestaña). Canvas acumula datos. Tema relacionado: plataformas de desarrollo colaborativo.

Solución: después de renderizar cada página, borrá las referencias: canvas = null; context = null; Explícitamente. En algunos browsers esto fuerza la recolección de basura.

Seguridad y privacidad en la extracción

Esto es lo que importa. Procesamiento client-side = cero transmisión de datos a servidores externos. El archivo entra en el navegador, se procesa en tu máquina, y se descarga. No hay intermediarios. No hay logs en el servidor. No hay almacenamiento temporal en discos ajenos.

Eso sí, esto aplica SOLO si vos hostas la herramienta en tu propio servidor o lo usás localmente. Si usás un servicio online que procesa PDFs “client-side”, verificá el código; podría estar enviando datos en segundo plano de todas formas.

Para documentos sensibles (financieros, médicos, personales), client-side es la única opción aceptable.

Client-side vs server-side: comparación

Errores que comete casi todo el mundo

Error 1: No esperar a que el worker cargue

Muchos intentan usar PDF.js inmediatamente después de cargar el script, antes de que el worker esté listo. Resultado: errores cryptic y rendimiento terrible.

La solución es simple: esperar explícitamente. Agregá un evento `onDocumentLoadingTask` o envolé todo en un `setTimeout` de 100ms. Mejor aún, documentá que el PDF.js setup requiere un segundo o dos antes de usar.

Error 2: No limpiar canvas entre páginas

Si renderizás múltiples páginas sin limpiar el canvas anterior, quedás con pixeles superpuestos o datos ghost. Necesitás `context.clearRect(0, 0, canvas.width, canvas.height)` antes de cada render.

Error 3: Asumir que todos los PDFs funcionan

No todos. Algunos están vencidos (PDF 1.1 o formatos legacy raros). Otros están encriptados pero aceptan contraseña vacía. Otros simplemente están rotos. Te puede servir nuestra cobertura de implementar en aplicaciones web profesionales.

Necesitás un try-catch y un fallback. Si el PDF falla, mostrá un mensaje claro: “Este PDF no se puede procesar. Probá con otro.”

Preguntas Frecuentes

¿Cómo extraer imágenes de un PDF usando JavaScript?

Usá PDF.js para cargar el PDF, obtené cada página con `getPage()`, renderizá en un canvas, y convertí a imagen con `canvas.toDataURL()`. Todo en JavaScript puro, sin backend. La documentación oficial de PDF.js tiene ejemplos interactivos.

¿Se puede procesar un PDF completamente en el navegador?

Sí, con PDF.js. El documento se carga en memoria, se parsea, se renderiza, y se convierte a imágenes. El único límite es la RAM disponible. Funciona completamente offline después de la carga inicial.

¿Cuál es la forma más segura de extraer imágenes de PDF?

Client-side, con PDF.js. El archivo nunca abandona tu máquina. No confiás en un servidor externo, no hay logs, no hay almacenamiento temporal. Para documentos sensibles (financieros, médicos, personales), es la única opción aceptable.

¿Cómo usar PDF.js para renderizar páginas en canvas?

Cargá el PDF con `getDocument()`, obtené una página con `getPage(pageNumber)`, calculá el viewport con `getViewport()`, creá un canvas con las dimensiones correctas, y renderizá la página en el canvas con `page.render()`. Es cinco líneas de código.

¿Puedo descargar imágenes de PDF sin un servidor?

Completamente. Renderizá cada página en canvas, convertí a blob con `canvas.toBlob()`, y descargá con FileSaver.js. Todo ocurre en el navegador. Si querés descargar múltiples páginas como ZIP, usá JSZip.

Conclusión

Extraer imágenes de un PDF en el navegador cambió el juego para cualquiera que maneje documentos sensibles. Client-side no es solo más rápido y más barato; es más seguro. El archivo nunca viaja por la red, nunca queda en un servidor, nunca hay intermediarios que ver, loguear, o filtrar.

PDF.js es sencillo de implementar (CDN + cinco líneas de código), funciona offline, y maneja la mayoría de los PDFs sin dramas. WebAssembly es una opción para casos complejos, pero honestamente para la mayoría de los casos es overkill.

Si alguna vez necesitaste procesar PDFs y pensaste que hacerlo en el cliente era imposible, ya no. Está disponible, funciona bien, y es gratis.

Fuentes

• Extracting Images from PDF in the Browser: A Pure Client-Side Implementation — Análisis técnico detallado publicado en Dev.to (2026)
• PDF.js Examples & Documentation — Documentación oficial de Mozilla con ejemplos interactivos
• PDF.js GitHub Repository — Código fuente y issues del proyecto
• Complete Guide to PDF.js — Guía completa de uso y optimización de PDF.js
• Acrobat on the Web Powered by WebAssembly — Visión de Adobe sobre procesamiento de PDFs con WebAssembly