Inviare un report ricco di colori a una laser monocromatica da ufficio ti costa due volte: la prima nel toner che la stampante spreca cercando di simulare il grigio con punti CMYK, la seconda nella qualità del risultato — retini e riempimenti dei grafici si trasformano in macchie fangose invece che in tonalità pulite. Inviare lo stesso file a un archivio documentale e il colore è peggio che inutile. I colori spot invecchiano, la gestione del colore varia da macchina a macchina e ogni ristampa risulta leggermente diversa dalla precedente. La scala di grigi è il formato che entrambi questi utilizzi vogliono davvero, ed è a una sola chiamata di distanza una volta che il PDF viene gestito tramite codice.
Questo articolo trasforma un PDF in un documento in scala di grigi direttamente nel browser con Spire.PDF for JavaScript. La libreria è compilata in WebAssembly e gestisce il documento tramite un file system virtuale (VFS), quindi il file viene letto e riscritto sulla macchina dell'utente e nulla viene inviato a un servizio di conversione.
Per la configurazione del progetto, segui Integrare Spire.PDF for JavaScript in un progetto React. L'esempio seguente presuppone che il pacchetto sia installato e che il modulo WebAssembly abbia terminato l'inizializzazione.
Perché convertire un PDF in scala di grigi (e quando è la scelta sbagliata)
Tre situazioni si presentano continuamente:
- Stampa su hardware monocromatico. Una laser monocromatica ha un solo toner. Quando le si affida un PDF a colori, deve approssimare ogni colore con un motivo a mezzetinte, ed è per questo che il testo colorato e le linee sottili dei grafici risultano sfocati. Un sorgente in scala di grigi elimina l'approssimazione — la stampante riceve tonalità, non colori da interpretare.
- Registri e archiviazione. Gli standard di conservazione a lungo termine sono definiti attorno a un aspetto fisso e indipendente dal dispositivo. Un documento in scala di grigi si riproduce allo stesso modo su ogni stampante e ogni scanner, quindi la copia archiviata non può cambiare.
- Pipeline di scansione e indicizzazione. Una volta che un documento è stato scansionato e sottoposto a OCR, il colore non porta alcuna informazione utilizzabile dall'indice — è solo peso.
Ci sono casi in cui è meglio non intervenire. Se il colore svolge un ruolo semantico — un grafico in cui ogni serie è di una tonalità diversa, un asset di brand, un portfolio fotografico — la conversione in scala di grigi distrugge proprio ciò di cui il lettore ha bisogno. È inoltre lo strumento sbagliato quando il problema reale è la dimensione: se l'obiettivo è un file più piccolo anziché una stampa più economica, ricorrere alla scala di grigi interviene solo sulle immagini e ignora font e flussi di contenuto, un lavoro che spetta invece a un compressore.
Cosa cambia davvero la scala di grigi
È facile pensare che "scala di grigi" significhi che la pagina viene ri-renderizzata come immagine. Non è così. La conversione opera a livello di oggetto:
| Parte della pagina | Cosa succede |
|---|---|
| Immagini a colori | Ricodificate in scala di grigi a canale singolo, un valore di luminanza per pixel invece di tre canali di colore |
| Testo | Inalterato come testo — ancora selezionabile, ancora ricercabile, ancora copiabile |
| Impaginazione e numero di pagine | Invariati; nulla viene ritagliato, spostato o rimosso |
| Metadati del documento | Preservati |
Poiché le immagini vengono ricodificate anziché rasterizzate in uno screenshot, il risultato è un PDF normale con uno spazio colore più piccolo — non l'immagine di un PDF. Questa distinzione conta nel momento in cui qualcuno prova a cercare nel risultato o a selezionare una riga di testo.
Convertire un documento in scala di grigi
Due membri fanno il lavoro: passa il file di input al costruttore di PdfGrayConverter, quindi chiama ToGrayPdf con il file di output. Il resto del componente è il consueto caricamento nel VFS e download 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;
Tre dettagli meritano attenzione. ToGrayPdf scrive un nuovo file — l'input nel VFS rimane com'era, quindi un'opzione "mantieni la versione a colori" non costa nulla. Dispose rilascia il convertitore una volta scritto il file. E sono le immagini a colori della pagina ciò che la chiamata riscrive davvero; il testo non diventa mai un'immagine.
Il documento di esempio dopo la conversione in scala di grigi, con i grafici a colori trasformati in scala di grigi
Scala di grigi vs desaturazione vs bianco e nero
Tre risultati diversi vengono tutti chiamati "scala di grigi" nell'uso comune, ma non sono lo stesso file:
| Output | Come viene memorizzato | Dimensione dei dati immagine | A cosa è destinato |
|---|---|---|---|
| Vera scala di grigi | Un canale, DeviceGray
|
Minima — un valore per pixel | Stampa, archiviazione, documenti generici |
| Colore desaturato | Tre canali uguali, DeviceRGB con R=G=B |
Circa tre volte i dati della scala di grigi | Un filtro visivo rapido quando il file esiste già |
| Bianco e nero a soglia | Un bit per pixel, senza tonalità | Minuscola | Pagine di testo scansionate dove il rumore è disturbo, non dettaglio |
Sullo schermo i primi due sono indistinguibili; la differenza sta interamente in quanti byte costa ogni pixel e in come una stampante deve interpretarlo. Una conversione a soglia è un'operazione completamente diversa — elimina i mezzitoni, quindi le fotografie diventano macchie e sopravvivono solo il line art e il testo pulito.
Il convertitore produce il primo tipo: un'immagine in scala di grigi a canale singolo, ed è anche il più economico dei tre da memorizzare.
L'effetto collaterale sulla dimensione del file
La scala di grigi non è una funzione di compressione, ma riduce comunque i file, e vale la pena sapere perché. Nel documento di esempio le immagini a colori erano PNG a tre canali per un totale di circa 66 KB; dopo la conversione le stesse immagini risultavano di circa 31 KB. L'intero file è passato da 82 KB a 44 KB — una riduzione di circa il 46%, ottenuta semplicemente eliminando i canali di colore. Il numero di pagine e il testo non sono cambiati affatto.
Questo arriva gratis insieme al risparmio d'inchiostro. Ma leggi il dato correttamente: il guadagno è proporzionale a quanto del file è bitmap. Un documento composto principalmente da testo e grafica vettoriale non ha quasi nulla di bitmap da ricodificare, quindi convertirlo in scala di grigi sposta appena la dimensione — e se l'obiettivo reale è la dimensione, le immagini sono solo uno dei tre posti in cui si nasconde il peso. Ridurre la dimensione del file PDF in JavaScript (React) tratta gli altri due.
Integrarlo in un'interfaccia React
In un componente reale il pattern precedente richiede due adattamenti.
Non lasciare l'alert. Il modulo WebAssembly si carica in modo asincrono, quindi il primo clic può arrivare prima che il convertitore esista. Disabilita il pulsante finché il modulo non segnala di essere pronto, invece di interrompere l'utente con una finestra di dialogo:
// 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>
Esegui la stessa chiamata in batch. Poiché il convertitore prende un file alla volta e ne scrive uno alla volta, una cartella di documenti è semplicemente un ciclo — stesso costruttore, stesso metodo, un nome di output diverso per ogni input:
// 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)
}
Dato che sia l'originale sia la copia in scala di grigi risiedono nel VFS, puoi mostrare un dato reale di prima e dopo accanto a ogni riga invece di un semplice link:
// 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;
Mostrare la percentuale risparmiata trasforma il pulsante in un risultato. Se i due numeri sono quasi uguali, il documento non aveva nulla nelle sue immagini da restituire — questa è un'informazione, non un fallimento.
Problemi comuni
L'output contiene una riga di avviso in più.
Una build senza licenza inserisce Evaluation Warning : The document was created with Spire.PDF for JavaScript. nel documento, e viene aggiunta a ogni chiamata — converti lo stesso file due volte in una sessione e la riga compare due volte. Una licenza temporanea la rimuove; contatta il reparto vendite per una chiave di 30 giorni, che elimina anche i limiti funzionali.
Il documento convertito sembra identico. Controlla di cosa è fatto il documento. Se è testo e grafica vettoriale senza bitmap, c'è molto poco che una conversione in scala di grigi possa cambiare, e la differenza sarà invisibile. È previsto, non è un bug.
Al primo clic non succede nulla. Il modulo era ancora in caricamento. Proteggi il gestore sulla reference del modulo, oppure mantieni il pulsante disabilitato finché non è pronto, come mostrato sopra.
Il file si è ridotto appena. La conversione in scala di grigi tocca solo le immagini. Se il peso è nei font o nei flussi di contenuto, questa conversione non è la leva giusta — vedi l'articolo sulla compressione linkato sopra.
FAQ
La conversione in scala di grigi rende il testo non selezionabile? No. Il testo non viene rasterizzato. Solo le immagini vengono ricodificate, quindi il risultato è ancora ricercabile, selezionabile e copiabile — semplicemente non ha colore.
Posso convertire solo alcune pagine? Il convertitore opera sull'intero documento. Se una parte di un file deve rimanere a colori, dividi prima il documento, converti la parte che deve essere in grigio e unisci di nuovo i pezzi.
La scala di grigi riduce sempre la dimensione del file? Non sempre, ma di solito un po' — il risparmio deriva dalle immagini, quindi più bitmap c'è, maggiore è il guadagno. I documenti già composti da testo e vettori potrebbero ridursi appena.
Devo caricare il file da qualche parte? No. Tutto avviene nel browser. Il PDF entra nel file system virtuale, viene riscritto lì e viene riletto per il download, quindi un documento riservato non lascia mai il dispositivo.
Posso offrire entrambe le versioni all'utente?
Sì. ToGrayPdf scrive su un nuovo nome di file e lascia l'input intatto, quindi l'originale a colori e la copia in scala di grigi sono entrambi disponibili nella stessa sessione.
Vedi anche
- Linearizzare un PDF per il Fast Web View in JavaScript (React)
- Ridurre la dimensione del file PDF: immagini, font e flussi di contenuto in JavaScript (React)
- Come convertire le pagine PDF in immagini in JavaScript (React)
- Integrare Spire.PDF for JavaScript in un progetto React
- Pagina del prodotto Spire.PDF for JavaScript