Cómo convertir PDF a escala de grises en JavaScript (React)

Envía un informe con muchos colores a una impresora láser monocromática de oficina y lo pagarás dos veces: una por el tóner que la impresora desperdicia al intentar simular gris a partir de puntos CMYK, y otra por la calidad del resultado: las tramas y los rellenos de los gráficos se convierten en manchas turbias en lugar de tonos limpios. Envía el mismo archivo a un archivo de registros y el color será peor que inútil. Los colores planos envejecen, la gestión del color se desvía entre máquinas y cada reimpresión sale ligeramente distinta de la anterior. La escala de grises es el formato que ambos trabajos realmente quieren, y está a una sola llamada de distancia una vez que el PDF se maneja en código.

Este artículo convierte un PDF en un documento en escala de grises dentro del navegador con Spire.PDF for JavaScript. La biblioteca está compilada a WebAssembly y controla el documento mediante un sistema de archivos virtual (VFS), por lo que el archivo se lee y se reescribe en la máquina del usuario y no se entrega nada a un servicio de conversión.

Para configurar el proyecto, sigue Integración de Spire.PDF for JavaScript en un proyecto de React. El ejemplo siguiente asume que el paquete está instalado y que el módulo WebAssembly ha terminado de inicializarse.

Por qué convertir un PDF a escala de grises (y cuándo es la decisión equivocada)

Hay tres situaciones que se repiten una y otra vez:

• Impresión en hardware monocromático. Un láser monocromático tiene un solo tóner. Cuando le entregas un PDF en color, tiene que aproximar cada color con un patrón de semitonos, y por eso el texto coloreado y las líneas finas de los gráficos salen borrosos. Un origen en escala de grises elimina la conjetura: la impresora recibe tono, no color que interpretar.
• Registros y archivado. Los estándares de almacenamiento a largo plazo se redactan en torno a una apariencia fija e independiente del dispositivo. Un documento en escala de grises se reproduce igual en cada impresora y cada escáner, por lo que la copia archivada no puede desviarse.
• Flujos de digitalización e indexación. Una vez que un documento se ha escaneado y se le ha aplicado OCR, el color no aporta información que el índice pueda usar: solo es peso.

Hay casos que conviene dejar en paz. Si el color realiza una función semántica —un gráfico donde cada serie es de un tono distinto, un recurso de marca, un portafolio de fotografías—, la conversión a escala de grises destruye justamente lo que el lector necesita. También es la herramienta equivocada cuando el problema real es el tamaño: si el objetivo es un archivo más pequeño en lugar de una impresión más barata, recurrir a la escala de grises ataca solo las imágenes e ignora las fuentes y los flujos de contenido, lo cual es tarea de un compresor.

Qué cambia realmente la escala de grises

Es fácil asumir que "escala de grises" significa que la página se vuelve a renderizar como una imagen. No es así. La conversión trabaja a nivel de objeto:

Como las imágenes se recodifican en lugar de rasterizarse en una captura de pantalla, la salida es un PDF normal con un espacio de color más pequeño, no una imagen de un PDF. Esa distinción importa en el momento en que alguien intenta buscar en el resultado o seleccionar una línea de texto.

Convertir un documento a escala de grises

Dos miembros hacen el trabajo: pasa el archivo de entrada al constructor PdfGrayConverter y luego llama a ToGrayPdf con el archivo de salida. El resto del componente es la carga habitual en el VFS y la descarga del Blob.

function App() {
  const convertToGrayscale = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check whether the module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file to be converted into the VFS
    const inputFileName = 'Business_Data_Overview.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Define the output file name
    const outputFileName = 'GrayscaleDocument.pdf';

    // Construct the grayscale converter from the input file and write out the grayscale document
    const converter = new pdfModule.PdfGrayConverter({ filePath: inputFileName });
    converter.ToGrayPdf({ filePath: outputFileName });
    converter.Dispose();

    // Read the generated file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert PDF to Grayscale</h1>
      <button onClick={convertToGrayscale}>
        Start Converting
      </button>
    </div>
  );
}

export default App;

Vale la pena fijarse en tres detalles. ToGrayPdf escribe un archivo nuevo: la entrada en el VFS queda como estaba, así que una opción de "conservar la versión en color" no cuesta nada. Dispose libera el convertidor una vez escrito el archivo. Y las imágenes en color de la página son lo que la llamada reescribe realmente; el texto nunca se convierte en imagen.

El documento de ejemplo después de la conversión a escala de grises, con los gráficos en color convertidos a escala de grises

Escala de grises vs desaturación vs blanco y negro

En el uso coloquial, a tres resultados distintos se les llama "escala de grises", y no son el mismo archivo:

En pantalla, los dos primeros son indistinguibles; la diferencia está enteramente en cuántos bytes cuesta cada píxel y en cómo tiene que interpretarlo una impresora. Una conversión por umbral es una operación completamente distinta: elimina los medios tonos, así que las fotografías se convierten en manchas y solo sobreviven el arte lineal y el texto limpio.

El convertidor escribe el primer tipo: una imagen en escala de grises de un solo canal, y por eso también es la más barata de almacenar de las tres.

El efecto secundario en el tamaño del archivo

La escala de grises no es una función de compresión, pero sí reduce el tamaño de los archivos, y vale la pena saber por qué. En el documento de ejemplo, las imágenes en color eran PNG de tres canales que sumaban unos 66 KB; tras la conversión, las mismas imágenes quedaron en torno a 31 KB. El archivo completo pasó de 82 KB a 44 KB, aproximadamente una reducción del 46 %, lograda puramente al eliminar los canales de color. El número de páginas y el texto no cambiaron en absoluto.

Eso viene gratis junto con el ahorro de tinta. Pero lee el número correctamente: la ganancia escala según cuánto del archivo sea mapa de bits. Un documento que es mayormente texto y arte vectorial apenas tiene mapa de bits que recodificar, así que convertirlo a escala de grises apenas mueve el tamaño; y si el objetivo real es el tamaño, las imágenes son solo uno de los tres lugares donde se esconde el peso. Reducción del tamaño de archivos PDF en JavaScript (React) cubre los otros dos.

Integrarlo en una interfaz de React

En un componente real, el patrón anterior necesita dos ajustes.

No dejes el alert. El módulo WebAssembly se carga de forma asíncrona, así que el primer clic puede llegar antes de que exista el convertidor. Deshabilita el botón hasta que el módulo informe que está listo, en lugar de interrumpir al usuario con un diálogo:

// The module may not have finished loading on the first render
const [ready, setReady] = useState(false);
// ...
<button disabled={!ready} onClick={convertToGrayscale}>Convert to Grayscale</button>

Procesa por lotes la misma llamada. Como el convertidor toma un archivo a la vez y escribe un archivo a la vez, una carpeta de documentos es solo un bucle: el mismo constructor, el mismo método, un nombre de salida distinto por cada entrada:

// The converter is a one-file operation, so a batch is a loop
for (const name of inputNames) {
  await window.spire.FetchFileToVFS(name, "", `${process.env.PUBLIC_URL}/data/`);
  const out = name.replace(/\.pdf$/i, '-gray.pdf');
  const converter = new pdfModule.PdfGrayConverter({ filePath: name });
  converter.ToGrayPdf({ filePath: out });
  converter.Dispose();
  // read out from the VFS and download (or report per-file sizes)
}

Como tanto el original como la copia en escala de grises están en el VFS, puedes informar una cifra real de antes y después junto a cada fila en lugar de un simple enlace:

// Both files are in the VFS, so the saving can be measured
const before = window.dotnetRuntime.Module.FS.readFile(name).length;
const after = window.dotnetRuntime.Module.FS.readFile(out).length;

Mostrar el porcentaje ahorrado convierte el botón en un resultado. Si los dos números son casi iguales, el documento no tenía nada en sus imágenes que devolver: eso es información, no un fallo.

Problemas comunes

La salida incluye una línea de advertencia adicional. Una compilación sin licencia inserta Evaluation Warning : The document was created with Spire.PDF for JavaScript. en el documento, y se añade por cada llamada: convierte el mismo archivo dos veces en una sesión y la línea aparecerá dos veces. Una licencia temporal la elimina; contacta con ventas para obtener una clave de 30 días, que también elimina los límites funcionales.

El documento convertido se ve idéntico. Comprueba de qué está hecho el documento. Si es texto y arte vectorial sin mapas de bits, hay muy poco que una pasada a escala de grises pueda cambiar, y la diferencia será invisible. Eso es lo esperado, no un error.

No ocurre nada en el primer clic. El módulo todavía se estaba cargando. Protege el controlador con la referencia del módulo, o mantén el botón deshabilitado hasta que esté listo, como se muestra arriba.

El archivo apenas se redujo. La conversión a escala de grises solo toca las imágenes. Si el peso está en las fuentes o en los flujos de contenido, esta conversión no es la palanca adecuada; consulta el artículo de compresión enlazado arriba.

Preguntas frecuentes

¿Convertir a escala de grises hace que el texto no se pueda seleccionar? No. El texto no se rasteriza. Solo se recodifican las imágenes, así que el resultado sigue siendo buscable, seleccionable y copiable; simplemente no tiene color.

¿Puedo convertir solo algunas páginas? El convertidor trabaja sobre el documento en su totalidad. Si parte de un archivo debe permanecer en color, divide primero el documento, convierte la parte que deba quedar en gris y vuelve a unir las piezas.

¿La conversión a escala de grises siempre reduce el tamaño del archivo? No siempre, pero por lo general un poco: el ahorro proviene de las imágenes, así que cuanto más mapa de bits haya, mayor será la ganancia. Los documentos que ya son texto y vectores puede que apenas cambien.

¿Tengo que subir el archivo a algún sitio? No. Todo ocurre en el navegador. El PDF entra en el sistema de archivos virtual, se reescribe allí y se lee de vuelta para descargarlo, así que un documento confidencial nunca sale del dispositivo.

¿Puedo ofrecer ambas versiones al usuario? Sí. ToGrayPdf escribe en un nuevo nombre de archivo y deja la entrada intacta, así que tanto el original en color como la copia en escala de grises están disponibles en la misma sesión.

Véase también

• Linealizar un PDF para una visualización web rápida en JavaScript (React)
• Reducir el tamaño de archivos PDF: imágenes, fuentes y flujos de contenido en JavaScript (React)
• Cómo convertir páginas de PDF a imágenes en JavaScript (React)
• Integración de Spire.PDF for JavaScript en un proyecto de React
• Página del producto Spire.PDF for JavaScript