Envie um relatório cheio de cores para uma impressora laser mono de escritório e você pagará por isso duas vezes: uma pelo toner que a impressora desperdiça tentando simular cinza a partir de pontos CMYK, e outra pela qualidade do resultado — retículas e preenchimentos de gráficos viram manchas turvas em vez de tons limpos. Envie o mesmo arquivo para um arquivo de registros e a cor será pior que inútil. Cores especiais envelhecem, o gerenciamento de cores varia entre máquinas e cada reimpressão sai um pouco diferente da anterior. A escala de cinza é o formato que ambos os trabalhos realmente desejam, e está a uma única chamada de distância quando o PDF é manipulado em código.
Este artigo transforma um PDF em um documento em escala de cinza dentro do navegador com o Spire.PDF for JavaScript. A biblioteca é compilada para WebAssembly e conduz o documento por meio de um sistema de arquivos virtual (VFS), de modo que o arquivo é lido e regravado na máquina do usuário e nada é enviado a um serviço de conversão.
Para a configuração do projeto, siga Integrating Spire.PDF for JavaScript in a React Project. O exemplo abaixo pressupõe que o pacote esteja instalado e que o módulo WebAssembly tenha terminado de inicializar.
Por que converter um PDF para escala de cinza (e quando essa é a decisão errada)
Três situações surgem repetidamente:
- Impressão em hardware monocromático. Um laser mono tem um único toner. Quando você entrega a ele um PDF colorido, ele precisa aproximar cada cor com um padrão de meio-tom, e é por isso que textos coloridos e linhas finas de gráficos saem borrados. Um documento em escala de cinza elimina o palpite — a impressora recebe tom, não cor a interpretar.
- Registros e arquivamento. As normas de armazenamento de longo prazo são escritas em torno de uma aparência fixa e independente de dispositivo. Um documento em escala de cinza é reproduzido da mesma forma em qualquer impressora e em qualquer scanner, de modo que a cópia arquivada não pode se degradar.
- Fluxos de digitalização e indexação. Depois que um documento foi digitalizado e passou por OCR, a cor não carrega nenhuma informação que o índice possa usar — é apenas peso.
Há casos em que é melhor não mexer. Se a cor desempenha um papel semântico — um gráfico em que cada série tem uma tonalidade diferente, um ativo de marca, um portfólio de fotografias — a conversão para escala de cinza destrói exatamente aquilo de que o leitor precisa. Também é a ferramenta errada quando o problema real é o tamanho: se o objetivo é um arquivo menor em vez de uma impressão mais econômica, recorrer à escala de cinza ataca apenas as imagens e ignora fontes e fluxos de conteúdo, o que é trabalho para um compressor.
O que a escala de cinza realmente altera
É fácil supor que "escala de cinza" significa que a página é renderizada novamente como uma imagem. Não é o caso. A conversão funciona no nível dos objetos:
| Parte da página | O que acontece |
|---|---|
| Imagens coloridas | Recodificadas como escala de cinza de canal único, um valor de luminância por pixel em vez de três canais de cor |
| Texto | Intocado como texto — continua selecionável, pesquisável e copiável |
| Layout e número de páginas | Inalterados; nada é cortado, movido ou removido |
| Metadados do documento | Preservados |
Como as imagens são recodificadas em vez de rasterizadas em uma captura de tela, a saída é um PDF normal com um espaço de cor menor — não uma foto de um PDF. Essa distinção importa no momento em que alguém tenta pesquisar no resultado ou selecionar uma linha de texto.
Convertendo um documento para escala de cinza
Dois membros fazem o trabalho: passe o arquivo de entrada para o construtor PdfGrayConverter e, em seguida, chame ToGrayPdf com o arquivo de saída. O restante do componente é o habitual carregamento no VFS e download via 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 a pena observar três detalhes. ToGrayPdf grava um arquivo novo — a entrada no VFS permanece como estava, de modo que uma opção de "manter a versão colorida" não custa nada. Dispose libera o conversor assim que o arquivo é gravado. E são as imagens coloridas da página que a chamada realmente regrava; o texto nunca se transforma em imagem.
O documento de exemplo após a conversão para escala de cinza, com os gráficos coloridos transformados em escala de cinza
Escala de cinza vs dessaturação vs preto e branco
Três resultados diferentes costumam ser chamados de "escala de cinza" no uso cotidiano, e eles não são o mesmo arquivo:
| Saída | Como é armazenada | Tamanho dos dados de imagem | Onde se aplica |
|---|---|---|---|
| Escala de cinza verdadeira | Um canal, DeviceGray
|
O menor — um valor por pixel | Impressão, arquivamento, documentos em geral |
| Cor dessaturada | Três canais iguais, DeviceRGB com R=G=B |
Cerca de três vezes os dados da escala de cinza | Um filtro visual rápido quando o arquivo já existe |
| Preto e branco por limiar | Um bit por pixel, sem tons | Minúsculo | Páginas de texto digitalizadas, em que o ruído é sujeira, não detalhe |
Na tela, os dois primeiros são indistinguíveis; a diferença está inteiramente em quantos bytes cada pixel custa e em como uma impressora precisa interpretá-lo. Uma conversão por limiar é uma operação completamente diferente — ela descarta os meios-tons, de modo que as fotografias viram manchas e só a arte de linha e o texto limpo sobrevivem.
O conversor grava o primeiro tipo: uma imagem em escala de cinza de canal único, que é também o mais econômico dos três em termos de armazenamento.
O efeito colateral no tamanho do arquivo
Escala de cinza não é um recurso de compressão, mas reduz o tamanho dos arquivos, e vale a pena entender por quê. No documento de exemplo, as imagens coloridas eram PNGs de três canais totalizando cerca de 66 KB; após a conversão, as mesmas imagens ficaram em torno de 31 KB. O arquivo inteiro passou de 82 KB para 44 KB — uma redução de aproximadamente 46%, alcançada apenas ao eliminar os canais de cor. O número de páginas e o texto não mudaram em nada.
Isso vem de graça junto com a economia de tinta. Mas leia o número corretamente: o ganho escala com a proporção do arquivo que é bitmap. Um documento composto principalmente de texto e arte vetorial quase não tem bitmap para recodificar, então convertê-lo para escala de cinza mal altera o tamanho — e, se o tamanho é o objetivo real, as imagens são apenas um dos três lugares onde o peso se esconde. Reducing PDF file size in JavaScript (React) aborda os outros dois.
Integrando a uma interface React
Em um componente real, o padrão acima precisa de dois ajustes.
Não deixe o alerta no código. O módulo WebAssembly carrega de forma assíncrona, então o primeiro clique pode chegar antes que o conversor exista. Desative o botão até que o módulo informe que está pronto, em vez de interromper o usuário com uma caixa de 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>
Faça lotes com a mesma chamada. Como o conversor processa um arquivo por vez e grava um arquivo por vez, uma pasta de documentos é apenas um laço — mesmo construtor, mesmo método, um nome de saída diferente por 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 o original quanto a cópia em escala de cinza ficam no VFS, você pode exibir um número real de antes e depois ao lado de cada linha, em vez de um simples 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;
Exibir a porcentagem economizada transforma o botão em um resultado. Se os dois números forem quase iguais, o documento não tinha nada em suas imagens para devolver — isso é informação, não uma falha.
Problemas comuns
A saída traz uma linha de aviso extra.
Uma compilação sem licença insere Evaluation Warning : The document was created with Spire.PDF for JavaScript. no documento, e isso é acrescentado a cada chamada — converta o mesmo arquivo duas vezes em uma sessão e a linha aparecerá duas vezes. Uma licença temporária a remove; entre em contato com vendas para obter uma chave de 30 dias, que também remove os limites funcionais.
O documento convertido parece idêntico. Verifique do que o documento é feito. Se for texto e arte vetorial sem bitmaps, há muito pouco para uma conversão em escala de cinza alterar, e a diferença será invisível. Isso é esperado, não é um bug.
Nada acontece no primeiro clique. O módulo ainda estava carregando. Proteja o manipulador com base na referência do módulo, ou mantenha o botão desativado até que ele esteja pronto, como mostrado acima.
O arquivo quase não diminuiu. A conversão para escala de cinza afeta apenas as imagens. Se o peso está nas fontes ou nos fluxos de conteúdo, esta conversão não é a alavanca — consulte o artigo sobre compressão indicado acima.
Perguntas frequentes
Converter para escala de cinza torna o texto não selecionável? Não. O texto não é rasterizado. Apenas as imagens são recodificadas, então o resultado continua pesquisável, selecionável e copiável — ele simplesmente não tem cor.
Posso converter apenas algumas páginas? O conversor trabalha com o documento como um todo. Se parte de um arquivo precisar permanecer colorida, divida o documento primeiro, converta a parte que deve ficar em cinza e mescle as partes novamente.
A conversão para escala de cinza sempre reduzirá o tamanho do arquivo? Não sempre, mas geralmente um pouco — a economia vem das imagens, então quanto mais bitmap houver, maior o ganho. Documentos que já são de texto e vetores podem quase não mudar.
Preciso enviar o arquivo para algum lugar? Não. Tudo acontece no navegador. O PDF entra no sistema de arquivos virtual, é regravado ali e é lido de volta para download, de modo que um documento confidencial nunca sai do dispositivo.
Posso oferecer as duas versões ao usuário?
Sim. ToGrayPdf grava em um novo nome de arquivo e deixa a entrada intocada, então o original colorido e a cópia em escala de cinza ficam ambos disponíveis na mesma sessão.