Envoyez un rapport très coloré à une imprimante laser monochrome de bureau et vous le payez deux fois : d’abord en toner que l’imprimante gaspille en tentant de simuler du gris à partir de points CMJN, puis en qualité du résultat — les trames et les aplats de graphiques deviennent des taches boueuses au lieu d’un ton net. Envoyez le même fichier à une archive documentaire et la couleur est pire qu’inutile. Les couleurs d’accompagnement vieillissent, la gestion des couleurs dérive d’une machine à l’autre, et chaque réimpression revient légèrement différente de la précédente. Les niveaux de gris sont le format que ces deux usages veulent réellement, et il suffit d’un seul appel une fois que le PDF est traité dans le code.
Cet article transforme un PDF en document en niveaux de gris dans le navigateur avec Spire.PDF for JavaScript. La bibliothèque est compilée en WebAssembly et pilote le document via un système de fichiers virtuel (VFS), de sorte que le fichier est lu et réécrit sur la machine de l’utilisateur et rien n’est confié à un service de conversion.
Pour la configuration du projet, suivez Intégration de Spire.PDF for JavaScript dans un projet React. L’exemple ci-dessous suppose que le package est installé et que le module WebAssembly a terminé son initialisation.
Pourquoi mettre un PDF en niveaux de gris (et quand c’est le mauvais choix)
Trois situations reviennent sans cesse :
- Impression sur du matériel monochrome. Une imprimante laser monochrome n’a qu’un seul toner. Lorsque vous lui confiez un PDF couleur, elle doit approximer chaque couleur avec un motif en simili, ce qui explique pourquoi le texte en couleur et les fines lignes de graphiques ressortent flous. Une source en niveaux de gris élimine toute approximation — l’imprimante reçoit des tons, et non des couleurs à interpréter.
- Archivage et conservation. Les normes de stockage à long terme sont conçues autour d’une apparence fixe et indépendante de l’appareil. Un document en niveaux de gris se reproduit de la même manière sur chaque imprimante et chaque scanner, de sorte que la copie archivée ne peut pas dériver.
- Pipelines de numérisation et d’indexation. Une fois qu’un document a été numérisé et passé par OCR, la couleur ne porte aucune information exploitable par l’index — elle ne représente qu’un poids.
Il y a des cas à laisser de côté. Si la couleur joue un rôle sémantique — un graphique où chaque série a une teinte différente, un élément de marque, un portfolio de photographies — la conversion en niveaux de gris détruit précisément ce dont le lecteur a besoin. C’est également le mauvais outil lorsque le véritable problème est la taille : si l’objectif est un fichier plus petit plutôt qu’une impression moins coûteuse, recourir aux niveaux de gris ne touche que les images et ignore les polices et les flux de contenu, ce qui relève plutôt d’un compresseur.
Ce que les niveaux de gris changent réellement
Il est facile de supposer que « niveaux de gris » signifie que la page est à nouveau rendue sous forme d’image. Ce n’est pas le cas. La conversion s’effectue au niveau des objets :
| Partie de la page | Ce qui se passe |
|---|---|
| Images couleur | Réencodées en niveaux de gris monocanal, une valeur de luminance par pixel au lieu de trois canaux de couleur |
| Texte | Inchangé en tant que texte — toujours sélectionnable, toujours recherchable, toujours copiable |
| Mise en page et nombre de pages | Inchangés ; rien n’est rogné, déplacé ni supprimé |
| Métadonnées du document | Préservées |
Étant donné que les images sont réencodées plutôt que rastérisées en capture d’écran, la sortie est un PDF normal avec un espace colorimétrique réduit — et non une image de PDF. Cette distinction compte dès que quelqu’un tente de rechercher dans le résultat ou de sélectionner une ligne de texte.
Convertir un document en niveaux de gris
Deux membres font le travail : passez le fichier d’entrée au constructeur PdfGrayConverter, puis appelez ToGrayPdf avec le fichier de sortie. Le reste du composant est le chargement VFS et le téléchargement Blob habituels.
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;
Trois détails méritent l’attention. ToGrayPdf écrit un nouveau fichier — l’entrée dans le VFS reste telle quelle, donc une option « conserver la version couleur » ne coûte rien. Dispose libère le convertisseur une fois le fichier écrit. Et ce sont les images couleur de la page que l’appel réécrit réellement ; le texte ne devient jamais une image.
Le document d’exemple après conversion en niveaux de gris, avec les graphiques couleur transformés en niveaux de gris
Niveaux de gris, désaturation et noir et blanc
Trois résultats différents sont tous appelés « niveaux de gris » dans l’usage courant, et ce ne sont pas les mêmes fichiers :
| Sortie | Mode de stockage | Taille des données d’image | Usage approprié |
|---|---|---|---|
| Véritables niveaux de gris | Un seul canal, DeviceGray
|
La plus petite — une valeur par pixel | Impression, archivage, documents généraux |
| Couleur désaturée | Trois canaux égaux, DeviceRGB avec R=G=B |
Environ trois fois les données de niveaux de gris | Un filtre visuel rapide lorsque le fichier existe déjà |
| Noir et blanc par seuil | Un bit par pixel, aucun ton | Minuscule | Pages de texte numérisées où le grain est du bruit, pas du détail |
À l’écran, les deux premiers sont indiscernables ; la différence tient entièrement au nombre d’octets que coûte chaque pixel et à la manière dont une imprimante doit l’interpréter. Une conversion par seuil est une opération complètement différente — elle supprime les tons moyens, de sorte que les photographies deviennent des taches et que seuls les dessins au trait et le texte net survivent.
Le convertisseur écrit le premier type : une image en niveaux de gris monocanal, ce qui explique aussi pourquoi c’est le moins coûteux des trois à stocker.
L’effet secondaire sur la taille du fichier
Les niveaux de gris ne sont pas une fonction de compression, mais ils réduisent les fichiers, et il vaut la peine de savoir pourquoi. Dans le document d’exemple, les images couleur étaient des PNG à trois canaux totalisant environ 66 Ko ; après conversion, les mêmes images faisaient environ 31 Ko. Le fichier entier est passé de 82 Ko à 44 Ko — soit une réduction d’environ 46 %, obtenue uniquement en supprimant les canaux de couleur. Le nombre de pages et le texte n’ont pas changé du tout.
Cela vient gratuitement avec l’économie d’encre. Mais lisez le chiffre correctement : le gain dépend de la part du fichier constituée d’images bitmap. Un document composé principalement de texte et d’illustrations vectorielles n’a presque aucune bitmap à réencoder, donc sa conversion en niveaux de gris ne modifie guère la taille — et si la taille est le véritable objectif, les images ne sont que l’un des trois endroits où se cache le poids. Réduire la taille d’un fichier PDF en JavaScript (React) couvre les deux autres.
L’intégrer dans une interface React
Dans un composant réel, le modèle ci-dessus nécessite deux ajustements.
Ne laissez pas l’alerte en place. Le module WebAssembly se charge de manière asynchrone, de sorte que le premier clic peut arriver avant que le convertisseur n’existe. Désactivez le bouton jusqu’à ce que le module signale qu’il est prêt plutôt que d’interrompre l’utilisateur avec une boîte de dialogue :
// 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>
Traitez le même appel par lots. Comme le convertisseur prend un fichier à la fois et écrit un fichier à la fois, un dossier de documents n’est qu’une boucle — même constructeur, même méthode, un nom de sortie différent par entrée :
// 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)
}
Comme l’original et la copie en niveaux de gris se trouvent tous deux dans le VFS, vous pouvez afficher un véritable chiffre avant/après à côté de chaque ligne au lieu d’un simple lien :
// 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;
Afficher le pourcentage économisé transforme le bouton en résultat. Si les deux nombres sont presque égaux, le document n’avait rien à récupérer dans ses images — c’est une information, pas un échec.
Problèmes courants
La sortie comporte une ligne d’avertissement supplémentaire.
Une version sans licence insère Evaluation Warning : The document was created with Spire.PDF for JavaScript. dans le document, et elle est ajoutée à chaque appel — convertissez le même fichier deux fois dans une session et la ligne apparaît deux fois. Une licence temporaire la supprime ; contactez le service commercial pour obtenir une clé de 30 jours, qui lève également les limites fonctionnelles.
Le document converti semble identique. Vérifiez de quoi le document est composé. S’il s’agit de texte et d’illustrations vectorielles sans images bitmap, une passe en niveaux de gris n’a que très peu de choses à modifier, et la différence sera invisible. C’est attendu, pas un bug.
Rien ne se passe au premier clic. Le module était encore en cours de chargement. Protégez le gestionnaire en vérifiant la référence du module, ou gardez le bouton désactivé jusqu’à ce qu’il soit prêt, comme indiqué ci-dessus.
Le fichier a à peine diminué. La conversion en niveaux de gris ne touche que les images. Si le poids se trouve dans les polices ou les flux de contenu, cette conversion n’est pas le bon levier — consultez l’article sur la compression lié ci-dessus.
FAQ
La conversion en niveaux de gris rend-elle le texte non sélectionnable ? Non. Le texte n’est pas rastérisé. Seules les images sont réencodées, de sorte que le résultat reste recherchable, sélectionnable et copiable — il n’a simplement pas de couleur.
Puis-je convertir seulement certaines pages ? Le convertisseur travaille sur le document dans son ensemble. Si une partie d’un fichier doit rester en couleur, divisez d’abord le document, convertissez la portion qui doit être en niveaux de gris, puis fusionnez les morceaux à nouveau.
La conversion en niveaux de gris réduit-elle toujours la taille du fichier ? Pas toujours, mais généralement un peu — l’économie provient des images, donc plus il y a de bitmap, plus le gain est important. Les documents déjà composés de texte et de vecteurs peuvent à peine changer.
Dois-je téléverser le fichier quelque part ? Non. Tout se passe dans le navigateur. Le PDF entre dans le système de fichiers virtuel, y est réécrit, puis relu pour le téléchargement, de sorte qu’un document confidentiel ne quitte jamais l’appareil.
Puis-je proposer les deux versions à l’utilisateur ?
Oui. ToGrayPdf écrit dans un nouveau nom de fichier et laisse l’entrée intacte, de sorte que l’original en couleur et la copie en niveaux de gris sont tous deux disponibles dans la même session.