In some cases, converting a document to grayscale reduces distractions, creates printer-friendly versions, lowers printing costs, or prepares files for black-and-white publishing.

A PDF to Grayscale Converter automates this process. Instead of editing every page manually, users can upload a PDF, choose how the grayscale conversion should be applied, preview the results, and download a newly generated document, all from within the browser.

In this tutorial, you'll build a browser-based PDF to Grayscale Converter using JavaScript. Users will be able to upload a PDF, preview every page, adjust the grayscale intensity, choose between multiple conversion modes, select which pages to process, generate a grayscale PDF, preview the final result, rename the output file, and download it without uploading their document to an external server.

We'll use PDF.js to render PDF pages, the HTML Canvas API to manipulate image pixels, and PDF-lib to generate the final downloadable PDF.

By the end of this tutorial, you'll have a complete client-side PDF processing application similar to the one available on All In One Tools.

Table of Contents

• What This PDF to Grayscale Converter Does and How It Works

• Project Setup

• Libraries Used

• Creating the HTML Layout

• Uploading and Previewing PDFs

• Building the Conversion Settings

• Converting PDF Pages to Grayscale

• Generating the Final PDF

• Previewing the Result

• Renaming and Downloading

• Demo: How the PDF to Grayscale Converter Works

• Performance Tips

• Common Mistakes

• Conclusion

What This PDF to Grayscale Converter Does and How It Works

A PDF to Grayscale Converter transforms colorful PDF pages into shades of gray while preserving the document's layout, page dimensions, text placement, and images. Instead of removing content, it recalculates the color of every pixel so the entire page appears in grayscale.

This is useful for creating printer-friendly documents, reducing color distractions, preparing files for monochrome printing, improving consistency across scanned documents, or producing black-and-white versions for review and archival purposes.

In this project, users can upload a PDF, browse through every page, adjust the grayscale intensity, choose between different conversion modes, decide whether all pages or only selected pages should be converted, generate a new grayscale PDF, preview the completed document, rename the output file, and download it directly from the browser.

Behind the scenes, PDF.js renders each PDF page onto an HTML canvas. Once the page has been rendered, JavaScript reads the RGB values for every pixel and calculates a grayscale value using a luminance formula. The updated pixels are written back to the canvas before PDF-lib assembles all processed pages into a brand-new PDF.

A typical pixel contains four values:

const pixel = {
    red: 180,
    green: 95,
    blue: 40,
    alpha: 255
};

To convert that pixel into grayscale, JavaScript calculates a single luminance value and applies it equally to the red, green, and blue channels.

const gray = 0.299 * red + 0.587 * green + 0.114 * blue;

The resulting pixel becomes:

pixel.red = gray;
pixel.green = gray;
pixel.blue = gray;

Repeating this process for every pixel on every selected page creates a new grayscale version of the original PDF while preserving the overall structure of the document.

Project Setup

Before writing the conversion logic, let's create a simple project structure.

We'll build everything using HTML, CSS, and JavaScript, together with PDF.js, the Canvas API, and PDF-lib.

Our project structure looks like this:

pdf-to-grayscale/
│── index.html
│── style.css
│── script.js
│── pdf.worker.min.js
│── assets/

Keeping the HTML, styling, and JavaScript separate makes the project easier to maintain as more PDF features are added.

Libraries Used

The PDF to Grayscale Converter relies on three browser technologies that work together to render PDF pages, process image pixels, and generate a new downloadable document.

PDF.js renders PDF pages directly inside the browser.

The HTML Canvas API provides access to every pixel so JavaScript can convert colors into grayscale.

PDF-lib creates the final PDF after all selected pages have been processed.

Include the required libraries before loading your application.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.js"></script>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
<script src="script.js"></script>

Configure the PDF.js worker.

pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";

Using a worker allows PDF rendering to happen in the background without freezing the browser interface.

Creating the HTML Layout

The application is divided into four main sections:

• Upload area

• PDF preview

• Conversion settings

• Download section

Create the basic page structure.

<section id="uploadSection"></section>
<section id="previewSection" hidden></section>
<section id="settingsSection" hidden></section>
<section id="downloadSection" hidden></section>

Only the upload area is visible when the page first loads. The remaining sections appear after a PDF has been successfully opened.

Selecting the Main Elements

Store references to the elements that will be used throughout the application.

const uploadSection = document.getElementById("uploadSection");
const previewSection = document.getElementById("previewSection");
const settingsSection = document.getElementById("settingsSection");
const pdfCanvas = document.getElementById("pdfCanvas");

Using these references makes it easier to update the interface as users move through the conversion process.

Uploading and Previewing PDFs

The upload area accepts both drag-and-drop and manual file selection.

When a file is selected, first verify that it's a PDF.

async function uploadPdf(file) {
    if (!file || file.type !== "application/pdf") {
        alert("Please select a PDF file.");
        return;
    }

    await loadPdf(file);
}

Once validation succeeds, the document is loaded into memory for processing.

Loading the PDF

Convert the uploaded file into an ArrayBuffer before opening it with PDF.js.

async function loadPdf(file) {
    const bytes = await file.arrayBuffer();

    pdfDocument = await pdfjsLib.getDocument({
        data: bytes
    }).promise;

    currentPage = 1;
    renderPage(currentPage);
}

The loaded document is stored so every page can later be converted to grayscale.

Rendering PDF Pages

PDF.js renders one page at a time onto an HTML canvas.

Retrieve the page.

const page = await pdfDocument.getPage(currentPage);

Create the viewport.

const viewport = page.getViewport({
    scale: 1.5
});

Resize the canvas.

pdfCanvas.width = viewport.width;
pdfCanvas.height = viewport.height;

Render the page.

await page.render({
    canvasContext: pdfCanvas.getContext("2d"),
    viewport
}).promise;

Once rendering finishes, the selected page appears inside the preview area.

Navigating Between Pages

Most PDF documents contain multiple pages, so users need simple navigation controls.

Track the current page.

let currentPage = 1;
let pdfDocument = null;

Move to the previous page.

previousButton.addEventListener("click", async () => {
    if (currentPage > 1) {
        currentPage--;
        await renderPage(currentPage);
    }
});

Move to the next page.

nextButton.addEventListener("click", async () => {
    if (currentPage < pdfDocument.numPages) {
        currentPage++;
        await renderPage(currentPage);
    }
});

Update the page indicator.

pageCounter.textContent = `Page ${currentPage} of ${pdfDocument.numPages}`;

Users can now browse through the document before deciding how the grayscale conversion should be applied.

Building the Conversion Settings

After the PDF has been loaded and previewed, users can configure how the document should be converted to grayscale. The settings panel allows users to adjust the grayscale intensity, choose a conversion mode, decide which pages should be processed, and start the conversion.

Adjusting Grayscale Intensity

The intensity slider controls how strongly the grayscale effect is applied.

Lower values retain more of the original color, while higher values produce a true grayscale appearance.

Create the slider.

<input type="range" id="grayIntensity" min="0" max="100" value="100">

Read the selected value.

const intensity = Number(document.getElementById("grayIntensity").value);

The selected intensity will later be used when calculating the final grayscale color.

Choosing the Conversion Mode

The tool provides multiple grayscale modes for different use cases.

Create the radio buttons.

<input type="radio" name="mode" value="standard" checked>
Standard Grayscale
<input type="radio" name="mode" value="threshold">
Black & White
<input type="radio" name="mode" value="soft">
Soft Gray

Retrieve the selected mode.

const conversionMode = document.querySelector(
    'input[name="mode"]:checked'
).value;

Each mode uses a different algorithm when processing the canvas pixels.

Selecting the Pages

Users can convert either the entire document or only selected pages.

Create the page selection controls.

<input type="radio" name="pages" value="all" checked>
All Pages
<input type="radio" name="pages" value="custom">
Specific Pages
<input type="text" id="pageRange" placeholder="e.g., 1, 3-5, 10">

Read the selected option.

const applyMode = document.querySelector(
    'input[name="pages"]:checked'
).value;

Retrieve the custom page range.

const pageRange = document.getElementById("pageRange").value.trim();

When All Pages is selected, every page in the PDF is processed. Otherwise, only the pages specified by the user are converted.

Converting PDF Pages to Grayscale

Once the settings have been configured, users can begin the conversion.

Create the action button.

<button id="convertPdf">Convert to Grayscale</button>

Start the conversion.

convertButton.addEventListener("click", async () => {
    await convertPdf();
});

Starting Over

Users can clear the current document and return the application to its initial state.

Create the reset button.

<button id="resetTool">Start Over</button>

Reset the application.

resetTool.addEventListener("click", () => {
    location.reload();
});

This removes the current PDF and restores the default settings so another document can be processed.

Reading Canvas Pixels

After a page has been rendered, retrieve its pixel data.

const imageData = context.getImageData(
    0,
    0,
    canvas.width,
    canvas.height
);

The pixel information is stored in an array.

const pixels = imageData.data;

Each pixel contains four values:

• Red

• Green

• Blue

• Alpha

We'll update the RGB values while leaving the alpha channel unchanged.

Converting Colors to Grayscale

The standard grayscale algorithm calculates a luminance value using the red, green, and blue channels.

Loop through every pixel.

for (let i = 0; i < pixels.length; i += 4) {
    const gray =
        0.299 * pixels[i] +
        0.587 * pixels[i + 1] +
        0.114 * pixels[i + 2];

    pixels[i] = gray;
    pixels[i + 1] = gray;
    pixels[i + 2] = gray;
}

This formula produces a natural-looking grayscale image because it reflects how the human eye perceives brightness.

Applying the Selected Conversion Mode

Different conversion modes use different pixel calculations.

For example, the Black & White (Threshold) mode converts each pixel into either pure black or pure white.

const threshold = 128;
const color = gray >= threshold ? 255 : 0;
pixels[i] = color;
pixels[i + 1] = color;
pixels[i + 2] = color;

The Soft Gray mode blends the original color with the grayscale value to create a less aggressive effect.

const softGray =
    (gray * 0.6) +
    (pixels[i] * 0.4);

pixels[i] = softGray;
pixels[i + 1] = softGray;
pixels[i + 2] = softGray;

Once the selected mode has been applied, write the updated pixels back to the canvas.

context.putImageData(
    imageData,
    0,
    0
);

Processing the Selected Pages

Instead of processing the entire document every time, convert only the pages selected by the user.

Loop through the page range.

for (let page = startPage; page <= endPage; page++) {
    await processPage(page);
}

Each processed page is temporarily stored before the final PDF is created.

Generating the Final PDF

Create a new PDF document.

const outputPdf = await PDFLib.PDFDocument.create();

Convert the processed canvas into an image.

const imageBytes = await canvasToBytes(pdfCanvas);

Embed the image into the PDF.

const image = await outputPdf.embedPng(imageBytes);

Create a new page.

const page = outputPdf.addPage([
    image.width,
    image.height
]);

Draw the processed image.

page.drawImage(image, {
    x: 0,
    y: 0,
    width: image.width,
    height: image.height
});

Repeat this process for every selected page until the new grayscale document is complete.

Saving the Generated PDF

After all pages have been processed, save the completed document.

const pdfBytes = await outputPdf.save();

Create a downloadable PDF file.

generatedPdfBlob = new Blob([pdfBytes], {
    type: "application/pdf"
});

The grayscale PDF is now ready for preview, renaming, and downloading.

Previewing the Result

Before downloading the converted document, it's useful to let users review the final output. This allows them to verify that the selected pages have been converted correctly and that the grayscale appearance meets their expectations.

Load the generated PDF using PDF.js.

let finalPdf = null;

async function showResult() {
    const bytes = await generatedPdfBlob.arrayBuffer();

    finalPdf = await pdfjsLib.getDocument({
        data: bytes
    }).promise;

    renderResultPage(1);
}

Render the selected page.

async function renderResultPage(pageNumber) {
    const page = await finalPdf.getPage(pageNumber);

    const viewport = page.getViewport({
        scale: 1.5
    });

    resultCanvas.width = viewport.width;
    resultCanvas.height = viewport.height;

    await page.render({
        canvasContext: resultCanvas.getContext("2d"),
        viewport
    }).promise;
}

Users can browse through every converted page before downloading the PDF.

Renaming and Downloading

Before saving the converted PDF, users can provide a custom filename.

Create the filename input.

<input
    type="text"
    id="outputFilename"
    value="grayscale-document.pdf"
>

Retrieve the filename.

function getFilename() {
    let filename = outputFilename.value.trim();

    if (!filename) {
        filename = "grayscale-document.pdf";
    }

    if (!filename.toLowerCase().endsWith(".pdf")) {
        filename += ".pdf";
    }

    return filename;
}

Display information about the generated PDF.

pageCount.textContent = `${finalPdf.numPages} Pages`;
fileSize.textContent = formatFileSize(generatedPdfBlob.size);

Download the completed PDF.

downloadButton.addEventListener("click", () => {
    const url = URL.createObjectURL(generatedPdfBlob);

    const link = document.createElement("a");
    link.href = url;
    link.download = getFilename();
    link.click();

    URL.revokeObjectURL(url);
});

Everything happens locally inside the browser, allowing users to keep their documents private throughout the conversion process.

Demo: How the PDF to Grayscale Converter Works

Let's walk through the complete workflow.

Step 1: Upload the PDF

Users begin by dragging a PDF into the upload area or clicking Select PDF.

Step 2: Preview the Document

PDF.js renders the uploaded document page by page, allowing users to review the file before conversion.

Step 3: Configure the Conversion

Users adjust the grayscale intensity, choose a conversion mode, and decide whether to process all pages or only selected pages.

Step 4: Convert the PDF

Click Convert to Grayscale to begin processing the selected pages.

Step 5: Review the Converted Document

After processing is complete, the application displays a preview of the generated grayscale PDF.

Step 6: Rename and Download

Finally, users can rename the output file, review the page count and file size, and download the converted PDF.

Performance Tips

Large PDF files require more processing time because every page must be rendered and converted. Processing only the selected pages helps improve performance.

for (let page = startPage; page <= endPage; page++) {
    await processPage(page);
}

After downloading the file, release temporary resources to reduce memory usage.

URL.revokeObjectURL(downloadUrl);

These simple optimizations help keep the converter responsive when working with large multi-page PDF documents.

Common Mistakes

One common mistake is converting the same page multiple times without first rendering the original page again. Always start with the original PDF page before applying another grayscale conversion.

await renderPage(currentPage);

Another issue is allowing users to specify invalid page numbers.

if (pageNumber < 1 || pageNumber > pdfDocument.numPages) {
    return;
}

Finally, remember that higher output quality usually produces larger PDF files. Choosing the appropriate quality setting helps balance image clarity and file size.

Conclusion

In this tutorial, you built a browser-based PDF to Grayscale Converter using JavaScript.

You learned how to upload and preview PDF documents, render pages with PDF.js, convert colorful pages into grayscale using the Canvas API, process selected pages, generate a new PDF with PDF-lib, preview the completed document, rename the output file, and download it directly from the browser.

Because all processing happens locally, users can convert PDF documents to grayscale without uploading sensitive files to an external server.

You can explore the complete workflow using the PDF to Grayscale Converter.

From here, you can extend the project with additional features such as sepia conversion, brightness and contrast controls, custom grayscale presets, batch PDF processing, or support for additional image filters.

This can be useful for creating branded reports, adding colored backgrounds, highlighting printed copies, producing design mockups, applying watermarked color effects, or preparing documents for presentations.

A PDF Color Overlay Tool makes this possible by placing a semi-transparent color layer over PDF pages while preserving the original text, images, and layout beneath it.

Instead of manually editing every page in graphic design software, users can upload a PDF, choose an overlay color, adjust its transparency, select a blend mode, decide where it should appear, preview the result, and download the updated document.

In this tutorial, you'll build this tool using JavaScript. Users will be able to upload a PDF and perform all the actions just mentioned – all without sending the document to a server.

Table of Contents

• What This PDF Color Overlay Tool Does and How It Works

• Project Setup

• Libraries Used

• Creating the HTML Layout

• Uploading and Previewing PDFs

• Building the Overlay Settings

• Applying Color Overlays to PDF Pages

• Generating the Final PDF

• Previewing the Result

• Renaming and Downloading

• Demo: How the PDF Color Overlay Tool Works

• Performance Tips

• Common Mistakes

• Conclusion

What This PDF Color Overlay Tool Does and How It Works

A PDF Color Overlay Tool applies a colored layer on top of one or more pages while keeping the original PDF content visible underneath. Unlike a color inverter or grayscale converter, which permanently transform every pixel, a color overlay blends a selected color with the existing page using adjustable transparency and blend modes.

This makes it useful for creating branded documents, adding colored backgrounds, producing presentation-ready PDFs, highlighting sections, creating themed reports, or generating preview versions without modifying the original source document.

In this project, users can upload a PDF, preview every page, choose an overlay color using either a color picker or a hexadecimal value, adjust the overlay opacity, select a blend mode, choose where the overlay should appear, decide which pages should receive the effect, preview the updated document, and download the finished PDF directly from the browser.

Internally, PDF.js renders each page onto an HTML canvas. JavaScript then draws a colored rectangle over the rendered page using the selected transparency and blend mode. Once all selected pages have been processed, PDF-lib assembles the updated pages into a new downloadable PDF.

The overlay color is represented using a hexadecimal value.

const overlay = {
    color: "#667eea",
    opacity: 0.5
};

When drawing the overlay, JavaScript first sets the transparency level.

context.globalAlpha = overlay.opacity;

Next, the selected color is applied.

context.fillStyle = overlay.color;

Finally, the colored rectangle is drawn over the required area.

context.fillRect(0, 0, canvas.width, canvas.height);

Depending on the selected blend mode, the overlay can either gently tint the document, produce darker colors, create dramatic lighting effects, or generate completely different visual styles while preserving the original page underneath.

Project Setup

Before implementing the overlay functionality, let's create a simple project structure.

We'll build the application using HTML, CSS, and JavaScript, together with PDF.js, the Canvas API, and PDF-lib.

Our project structure looks like this:

pdf-color-overlay/
│── index.html
│── style.css
│── script.js
│── pdf.worker.min.js
│── assets/

Separating the HTML, CSS, and JavaScript keeps the project organized and makes future enhancements easier to implement.

Libraries Used

Our PDF Color Overlay Tool relies on three browser technologies that work together to render PDF pages, apply color overlays, and generate a new downloadable document.

PDF.js renders PDF pages directly inside the browser.

The HTML Canvas API draws the color overlay on top of each rendered page using transparency and blend modes.

PDF-lib generates the final PDF after all selected pages have been processed.

Include the required libraries before loading your application:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.js"></script>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
<script src="script.js"></script>

Configure the PDF.js worker.

pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";

Using a worker allows PDF rendering to happen in the background, keeping the interface responsive even when opening large PDF files.

Creating the HTML Layout

The application is divided into four main sections:

• Upload area

• PDF preview

• Overlay settings

• Download section

Create the basic layout.

<section id="uploadSection"></section>
<section id="previewSection" hidden></section>
<section id="settingsSection" hidden></section>
<section id="downloadSection" hidden></section>

Initially, only the upload area is visible. The remaining sections appear after a PDF has been successfully loaded.

Selecting the Main Elements

Store references to the elements used throughout the application.

const uploadSection = document.getElementById("uploadSection");
const previewSection = document.getElementById("previewSection");
const settingsSection = document.getElementById("settingsSection");
const pdfCanvas = document.getElementById("pdfCanvas");

These references allow the application to update the interface without repeatedly searching the DOM.

Uploading and Previewing PDFs

The upload area supports both drag-and-drop and manual file selection.

Before loading the document, verify that the selected file is a PDF.

async function uploadPdf(file) {
    if (!file || file.type !== "application/pdf") {
        alert("Please select a PDF file.");
        return;
    }

    await loadPdf(file);
}

After validation, the PDF is loaded into memory for rendering.

Loading the PDF

Convert the uploaded file into an ArrayBuffer before opening it with PDF.js.

async function loadPdf(file) {
    const bytes = await file.arrayBuffer();
    pdfDocument = await pdfjsLib.getDocument({
        data: bytes
    }).promise;
    currentPage = 1;
    renderPage(currentPage);
}

Once the document has loaded successfully, the first page is rendered automatically.

Rendering PDF Pages

PDF.js renders one page at a time onto an HTML canvas.

Retrieve the selected page.

const page = await pdfDocument.getPage(currentPage);

Create the viewport.

const viewport = page.getViewport({
    scale: 1.5
});

Resize the canvas.

pdfCanvas.width = viewport.width;
pdfCanvas.height = viewport.height;

Render the page.

await page.render({
    canvasContext: pdfCanvas.getContext("2d"),
    viewport
}).promise;

After rendering completes, users can view the current page before applying any overlay effects.

Navigating Between Pages

Most PDF documents contain multiple pages, so the application includes simple navigation controls.

Store the current page.

let currentPage = 1;
let pdfDocument = null;

Move to the previous page.

previousButton.addEventListener("click", async () => {
    if (currentPage > 1) {
        currentPage--;
        await renderPage(currentPage);
    }
});

Move to the next page.

nextButton.addEventListener("click", async () => {
    if (currentPage < pdfDocument.numPages) {
        currentPage++;
        await renderPage(currentPage);
    }
});

Update the page indicator.

pageCounter.textContent = `Page ${currentPage} of ${pdfDocument.numPages}`;

Users can now browse through the uploaded PDF before deciding how the color overlay should be applied.

Building the Overlay Settings

After the PDF has been uploaded and previewed, users can configure how the color overlay should be applied. The settings panel lets users choose an overlay color, adjust its transparency, select a blend mode, specify where the overlay should appear, and decide which pages should receive the effect before generating the final PDF.

Choosing the Overlay Color

The first setting allows users to choose the color that will be placed over the PDF.

The application supports both a color picker and direct hexadecimal input.

Create the color picker.

<input type="color" id="overlayColor" value="#667eea">

Create the hexadecimal input.

<input type="text" id="hexValue" value="#667eea">

Retrieve the selected color.

const overlayColor = document.getElementById("overlayColor").value;

If users enter a hexadecimal value manually, synchronize it with the color picker.

hexValue.addEventListener("input", () => {
    overlayColor.value = hexValue.value;
});

The selected color will later be drawn over the rendered PDF page.

Adjusting the Opacity

Opacity controls how transparent the overlay appears.

Lower values allow more of the original PDF to remain visible, while higher values create a stronger color effect.

Create the opacity slider.

<input type="range" id="opacity" min="0" max="100" value="50">

Retrieve the selected value.

const opacity = Number(document.getElementById("opacity").value) / 100;

This value is later assigned to the canvas transparency before drawing the overlay.

Selecting the Blend Mode

Blend modes determine how the overlay color interacts with the original PDF content.

Create the dropdown.

<select id="blendMode">
    <option value="source-over">Normal</option>
    <option value="multiply">Multiply</option>
    <option value="overlay">Overlay</option>
    <option value="soft-light">Soft Light</option>
    <option value="hard-light">Hard Light</option>
    <option value="difference">Difference</option>
</select>

Retrieve the selected blend mode.

const blendMode = document.getElementById("blendMode").value;

Each blend mode produces a different visual effect while preserving the document beneath the overlay.

Choosing the Overlay Position

The overlay doesn't always need to cover the entire page. Users can apply it only to specific regions if they want.

Create the available options.

<input type="radio" name="position" value="full" checked>
Full Page
<input type="radio" name="position" value="header">
Header Only
<input type="radio" name="position" value="footer">
Footer Only

Retrieve the selected position.

const position = document.querySelector('input[name="position"]:checked').value;

During processing, the application draws the overlay only inside the selected area.

Choosing Which Pages to Process

Users can apply the overlay in several different ways:

• Current page only

• Entire document

• Separate overlay for every page

• Specific pages

Create the page selection controls.

<input type="radio" name="pages" value="current" checked>
Current page only
<input type="radio" name="pages" value="all">
All pages
<input type="radio" name="pages" value="separate">
Separate overlay per page
<input type="radio" name="pages" value="custom">
Specific pages
<input type="text" id="pageRange" placeholder="e.g., 1, 3-5, 10">

Retrieve the selected option.

const pageMode = document.querySelector('input[name="pages"]:checked').value;

Read the custom page range.

const pageRange = document.getElementById("pageRange").value.trim();

This flexibility allows users to apply different overlay strategies depending on the document.

Applying the Overlay

Once all settings have been configured, users can begin processing the PDF.

Create the action button.

<button id="applyOverlay">Apply Overlay</button>

Start the processing workflow.

applyOverlay.addEventListener("click", async () => {
    await processOverlay();
});

Starting Over

Users can reset the application at any time and upload another document.

Create the reset button.

<button id="resetTool">Start Over</button>

Reset the tool.

resetTool.addEventListener("click", () => {
    location.reload();
});

The upload area becomes visible again, allowing another PDF to be processed without manually clearing every setting.

Applying Color Overlays to PDF Pages

Now we'll build the main feature of the application: adding a colored overlay to PDF pages.

The process begins by rendering each selected PDF page onto an HTML canvas using PDF.js. JavaScript then draws a semi-transparent colored rectangle over the page using the selected blend mode. Once all selected pages have been processed, PDF-lib generates a new downloadable PDF.

Applying the Overlay Color

Before drawing anything, retrieve the selected color.

const overlayColor = document.getElementById("overlayColor").value;

Set the canvas fill color.

context.fillStyle = overlayColor;

This color will be drawn over the selected portion of each PDF page.

Setting the Overlay Transparency

Opacity determines how much of the original page remains visible beneath the overlay.

Apply the selected transparency.

context.globalAlpha = opacity;

A lower opacity produces a subtle tint, while higher values create a stronger visual effect.

Applying the Blend Mode

Canvas supports several compositing modes that determine how the overlay interacts with the existing page.

Assign the selected blend mode.

context.globalCompositeOperation = blendMode;

Some common modes include:

• Normal – Places the color directly over the page.

• Multiply – Produces a darker appearance.

• Overlay – Increases overall contrast.

• Soft Light – Creates a gentle lighting effect.

• Hard Light – Produces a stronger contrast.

• Difference – Generates an inverted-style appearance based on color differences.

Drawing the Overlay

Once the color, opacity, and blend mode have been configured, draw the overlay on the canvas.

For a full-page overlay:

context.fillRect(0, 0, canvas.width, canvas.height);

If users choose Header Only, draw the rectangle across only the top section.

context.fillRect(0, 0, canvas.width, 120);

For Footer Only, draw the overlay near the bottom of the page.

context.fillRect(0, canvas.height - 120, canvas.width, 120);

These options allow different overlay styles without modifying the underlying PDF content.

Processing the Selected Pages

After configuring the overlay, process only the pages chosen by the user.

Loop through the selected pages.

for (let page = startPage; page <= endPage; page++) {
    await processPage(page);
}

Each processed page is temporarily stored before creating the final document.

If Current Page Only is selected, only the active page is processed. If All Pages is selected, the overlay is applied to the complete document.

Generating the Final PDF

Create a new PDF document.

const outputPdf = await PDFLib.PDFDocument.create();

Convert the processed canvas into an image.

const imageBytes = await canvasToBytes(pdfCanvas);

Embed the image.

const image = await outputPdf.embedPng(imageBytes);

Create a new page.

const page = outputPdf.addPage([
    image.width,
    image.height
]);

Draw the processed image.

page.drawImage(image, {
    x: 0,
    y: 0,
    width: image.width,
    height: image.height
});

Repeat these steps until every selected page has been added to the new PDF.

Saving the Generated PDF

Once all pages have been processed, save the completed document.

const pdfBytes = await outputPdf.save();

Create a downloadable file.

generatedPdfBlob = new Blob([pdfBytes], {
    type: "application/pdf"
});

The new PDF containing the selected color overlays is now ready for preview.

Previewing the Result

Before downloading the processed document, users should be able to review the final output. This makes it easy to verify that the selected color, opacity, blend mode, and page selection have been applied correctly.

Load the generated PDF.

let finalPdf = null;
async function showPreview() {
    const bytes = await generatedPdfBlob.arrayBuffer();
    finalPdf = await pdfjsLib.getDocument({
        data: bytes
    }).promise;
    renderFinalPage(1);
}

Render the selected page.

async function renderFinalPage(pageNumber) {
    const page = await finalPdf.getPage(pageNumber);

    const viewport = page.getViewport({
        scale: 1.5
    });

    previewCanvas.width = viewport.width;
    previewCanvas.height = viewport.height;

    await page.render({
        canvasContext: previewCanvas.getContext("2d"),
        viewport
    }).promise;
}

Users can navigate through the processed PDF before downloading it.

Renaming and Downloading

Before saving the generated PDF, users can customize the output filename.

Create the filename input.

<input type="text" id="outputFilename" value="color-overlay.pdf">

Retrieve the filename.

function getFilename() {
    let filename = outputFilename.value.trim();

    if (!filename) {
        filename = "color-overlay.pdf";
    }

    if (!filename.toLowerCase().endsWith(".pdf")) {
        filename += ".pdf";
    }

    return filename;
}

Display information about the generated PDF.

pageCount.textContent = `${finalPdf.numPages} Pages`;
fileSize.textContent = formatFileSize(generatedPdfBlob.size);

Download the completed document.

downloadButton.addEventListener("click", () => {
    const url = URL.createObjectURL(generatedPdfBlob);
    const link = document.createElement("a");

    link.href = url;
    link.download = getFilename();
    link.click();

    URL.revokeObjectURL(url);
});

Everything happens locally inside the browser, helping users keep their PDF files private.

Demo: How the PDF Color Overlay Tool Works

Let's walk through the complete workflow.

Step 1: Upload the PDF

Users begin by dragging a PDF into the upload area or clicking Select PDF.

Step 2: Preview the Document

The uploaded PDF is rendered page by page, allowing users to review the document before applying any changes.

Step 3: Configure the Overlay

Users choose an overlay color, adjust the opacity, select a blend mode, choose the overlay position, and decide which pages should receive the effect.

Step 4: Apply the Overlay

Click Apply Overlay to process the selected pages using the chosen settings.

Step 5: Review the Processed PDF

The completed PDF appears in the preview window so users can verify the applied overlay before downloading.

Step 6: Rename and Download

Finally, users rename the output file if needed, review the page count and file size, and download the generated PDF.

Performance Tips

Large PDF files can take longer to process because every selected page must be rendered and updated. Processing only the required pages helps improve performance.

for (const page of selectedPages) {
    await processPage(page);
}

After downloading the file, release temporary resources to reduce memory usage.

URL.revokeObjectURL(downloadUrl);

These small optimizations help keep the application responsive when working with large multi-page PDF documents.

Common Mistakes

One common mistake is applying multiple overlays without first restoring the original page. Always render a fresh copy of the PDF page before applying another overlay.

await renderPage(currentPage);

Another issue is forgetting to restore the default canvas state after changing the opacity or blend mode.

context.globalAlpha = 1;
context.globalCompositeOperation = "source-over";

Finally, using a very high opacity can completely hide the original PDF content. Choosing an appropriate transparency level usually produces a more balanced result.

Conclusion

In this tutorial, you built a browser-based PDF Color Overlay Tool using JavaScript.

You learned how to upload PDF documents, render pages with PDF.js, configure overlay colors, adjust opacity, apply blend modes, position overlays, process selected pages, generate a new PDF with PDF-lib, preview the completed document, rename the output file, and download it directly from the browser.

Because the entire workflow runs locally, users can customize PDF documents without uploading sensitive files to an external server.

You can explore the complete workflow using the PDF Color Overlay Tool.

From here, you can extend the project with gradient overlays, custom overlay shapes, image overlays, reusable color presets, watermark templates, or additional PDF editing features for even greater flexibility.

In this tutorial, you'll build a browser-based PDF Filter Studio using JavaScript, PDF.js, the Canvas API, and PDF-lib. Users can upload a PDF, preview each page, stack multiple filter layers, apply preset effects, process selected pages, preview the final document, rename it, and download the edited PDF directly from the browser.

Since every step runs locally, the uploaded PDF never leaves the user's device, making the application both fast and privacy-friendly.

Table of Contents

• What This PDF Filter Studio Does and How It Works

• Why Build a PDF Filter Studio?

• Project Setup

• Libraries Used

• Creating the HTML Layout

• Uploading and Previewing PDFs

• Building Filter Layers

• Applying Filters to PDF Pages

• Applying Preset Effects

• Generating the Final PDF

• Previewing the Result

• Renaming and Downloading

• Demo: How the PDF Filter Studio Works

• Performance Tips

• Common Mistakes

• Conclusion

What This PDF Filter Studio Does and How It Works

Unlike tools that perform only a single operation, this PDF Filter Studio lets users combine multiple image adjustments before generating a new PDF.

After uploading a document, each page is rendered in the browser with PDF.js and displayed inside a preview window. Users can then create one or more filter layers, adjust values such as brightness, contrast, saturation, blur, opacity, grayscale, sepia, invert colors, or hue rotation, and instantly see how those settings affect the document.

For users who don't want to configure every adjustment manually, the application also includes preset effects like Grayscale, Sepia (Vintage), Invert (Negative), Sharpen, Glow, and Vignette. Once they've achieved the desired appearance, the selected filters are applied to the chosen pages, a new PDF is generated using PDF-lib, and the finished document can be reviewed, renamed, and downloaded without uploading files to any server.

This workflow provides a flexible way to enhance reports, presentations, scanned documents, marketing materials, and image-heavy PDFs directly inside the browser.

Why Build a PDF Filter Studio?

Most online PDF editors focus on structural changes such as merging, splitting, rotating, or compressing documents. Very few allow users to enhance the visual appearance of PDF pages using adjustable image filters.

A browser-based PDF Filter Studio fills that gap by combining document processing with image editing. Instead of exporting PDF pages into image-editing software, applying effects, and recreating the document, users can complete the entire workflow in one place.

Building this project is also an excellent way to learn several important web development concepts, including rendering PDF pages with PDF.js, processing images with the Canvas API, creating reusable filter pipelines, managing multiple filter layers, working with dynamic user interfaces, and generating new PDF files using PDF-lib.

Because every operation happens locally inside the browser, documents remain private while delivering fast performance and eliminating the need for additional software installations

Project Setup

Create a project folder with the following structure:

pdf-filter-studio/
│── index.html
│── style.css
│── script.js
│── assets/

The project is intentionally simple.

• index.html builds the application interface.

• style.css controls the layout and appearance.

• script.js manages PDF rendering, filter processing, and PDF generation.

• assets stores icons or other optional resources used by the application.

Once the folder structure is ready, we'll import the required libraries, build the upload interface, render PDF pages, and begin creating the filter system.

Libraries Used

This PDF Filter Studio combines three browser technologies to upload PDF files, render pages, apply multiple visual filters, and generate a brand-new downloadable PDF.

PDF.js is responsible for rendering PDF pages inside the browser.

The Canvas API applies brightness, contrast, blur, saturation, grayscale, sepia, invert, opacity, and hue rotation filters directly to each rendered page.

Finally, PDF-lib creates the edited PDF after all selected pages have been processed.

Include the required libraries before loading your JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.js"></script>
<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
<script src="script.js"></script>

Configure the PDF.js worker.

pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";

Using a worker keeps rendering smooth while JavaScript continues handling the user interface.

Creating the HTML Layout

The application is divided into four sections:

• Upload Area

• PDF Preview

• Filter Panel

• Download Section

Create the basic structure.

<section id="uploadSection"></section>
<section id="previewSection" hidden></section>
<section id="filterSection" hidden></section>
<section id="downloadSection" hidden></section>

Initially only the upload section is visible. Once a PDF is selected, the remaining sections automatically appear.

Selecting DOM Elements

Store references to the elements used throughout the application.

const uploadSection = document.getElementById("uploadSection");
const previewCanvas = document.getElementById("previewCanvas");
const previousButton = document.getElementById("previousPage");
const nextButton = document.getElementById("nextPage");
const rotateLeftButton = document.getElementById("rotateLeft");
const rotateRightButton = document.getElementById("rotateRight");

Keeping references at the beginning of the script makes the rest of the code cleaner and easier to maintain.

Uploading and Previewing PDFs

The upload area supports both drag-and-drop and manual file selection.

Before loading the document, verify that the selected file is actually a PDF.

async function uploadPdf(file) {
    if (!file || file.type !== "application/pdf") {
        alert("Please choose a PDF file.");
        return;
    }

    await loadPdf(file);
}

Once validation succeeds, the document is loaded into memory.

Loading the PDF

Convert the uploaded file into an ArrayBuffer before opening it with PDF.js.

async function loadPdf(file) {
    const bytes = await file.arrayBuffer();
    pdfDocument = await pdfjsLib.getDocument({
        data: bytes
    }).promise;

    currentPage = 1;
    renderPage(currentPage);
}

After the document is loaded successfully, the first page is displayed automatically.

Rendering PDF Pages

Each page is rendered onto an HTML canvas.

Retrieve the selected page.

const page = await pdfDocument.getPage(currentPage);

Create a viewport.

const viewport = page.getViewport({
    scale: 1.5
});

Resize the canvas.

previewCanvas.width = viewport.width;
previewCanvas.height = viewport.height;

Render the page.

await page.render({
    canvasContext: previewCanvas.getContext("2d"),
    viewport
}).promise;

Every page now appears exactly as it exists inside the original PDF.

Navigating Between Pages

Most PDF files contain multiple pages, so users need simple navigation controls.

Store the current page.

let currentPage = 1;
let pdfDocument = null;

Move to the previous page.

previousButton.addEventListener("click", async () => {
    if (currentPage > 1) {
        currentPage--;
        await renderPage(currentPage);
    }
});

Move to the next page.

nextButton.addEventListener("click", async () => {
    if (currentPage < pdfDocument.numPages) {
        currentPage++;
        await renderPage(currentPage);
    }
});

Update the page counter.

pageIndicator.textContent = `Page ${currentPage} of ${pdfDocument.numPages}`;

Users can now browse through the document before adding filters.

Rotating the Preview

The application also includes preview rotation controls. Rotation affects only the preview, allowing users to inspect pages from different orientations before applying filters.

Store the current rotation angle.

let rotation = 0;

Rotate left.

rotateLeftButton.addEventListener("click", () => {
    rotation -= 90;
    renderPage(currentPage);
});

Rotate right.

rotateRightButton.addEventListener("click", () => {
    rotation += 90;
    renderPage(currentPage);
});

Apply the rotation when creating the viewport.

const viewport = page.getViewport({
    scale: 1.5,
    rotation
});

These controls improve the preview experience without modifying the original PDF.

Building the Filter Panel

The Filter Panel is the core of the PDF Filter Studio. Instead of applying a single effect, users can build a stack of filter layers, combine multiple adjustments, and preview the result before generating the final PDF.

Each filter layer represents one image adjustment such as Brightness, Contrast, Saturation, Blur, Opacity, Grayscale, Sepia, Invert Colors, or Hue Rotate.

Users can also apply one-click preset effects like Grayscale, Sepia (Vintage), Invert (Negative), Sharpen, Glow, and Vignette.

Creating Filter Layers

Instead of hardcoding every adjustment, we'll store filters inside an array.

const filters = [];

Each filter contains its type and value.

filters.push({
    type: "brightness",
    value: 120
});

Using this structure allows users to combine multiple filters in any order.

Adding a New Filter Layer

Users first select a filter from the dropdown, then click Add.

Create the dropdown.

<select id="filterType">
    <option>Brightness</option>
    <option>Contrast</option>
    <option>Saturation</option>
    <option>Blur</option>
    <option>Opacity</option>
    <option>Grayscale</option>
    <option>Sepia</option>
    <option>Invert Colors</option>
    <option>Hue Rotate</option>
</select>

Add the selected filter.

addButton.addEventListener("click", () => {
    filters.push({
        type: filterType.value,
        value: 100
    });

    renderFilters();
});

Each new filter immediately appears inside the Filter Layers panel.

Displaying Filter Layers

Whenever a filter is added, rebuild the filter list.

function renderFilters() {
    filterContainer.innerHTML = "";

    filters.forEach(createFilterCard);
}

Each filter card contains:

• Filter name

• Value slider

• Current value

• Delete button

This design makes it easy to manage multiple adjustments.

Updating Filter Values

Each layer contains its own slider.

Example for Brightness:

slider.addEventListener("input", event => {
    filter.value = Number(event.target.value);
    updatePreview();
});

The preview refreshes immediately whenever a slider changes.

The same logic is reused for every filter type.

Supporting Multiple Filter Types

Different filters use different ranges.

const ranges = {
    brightness: [0, 200],
    contrast: [0, 200],
    saturation: [0, 200],
    blur: [0, 20],
    opacity: [0, 100],
    grayscale: [0, 100],
    sepia: [0, 100],
    invert: [0, 100],
    hue: [0, 360]
};

This allows every adjustment to use the most appropriate values.

Preset Effects

Some users prefer one-click effects instead of manually creating filter layers.

The application includes several preset buttons.

<button>Grayscale</button>
<button>Sepia</button>
<button>Invert</button>
<button>Sharpen</button>
<button>Glow</button>
<button>Vignette</button>

Each preset simply creates one or more filter layers automatically.

For example, Grayscale:

function grayscalePreset() {
    filters.length = 0;

    filters.push({
        type: "grayscale",
        value: 100
    });

    updatePreview();
}

Users can still edit the generated layers afterwards.

Applying Filters to Specific Pages

Not every page needs the same effect. Users can choose where filters should be applied.

Create the page options.

<input type="radio" name="pages" value="current" checked>
Current page only
<input type="radio" name="pages" value="all">
All pages
<input type="radio" name="pages" value="custom">
Specific pages

Retrieve the selected option.

const pageMode = document.querySelector('input[name="pages"]:checked').value;

If users choose Specific pages, read the page range.

const pageRange = document.getElementById("pageRange").value;

This allows users to edit only selected pages while leaving the rest unchanged.

Removing Filter Layers

Users can delete any filter before processing.

Create the delete function.

function removeFilter(index) {
    filters.splice(index, 1);
    renderFilters();
    updatePreview();
}

Removing a layer immediately updates the preview. This makes experimenting with different combinations quick and intuitive.

Applying Filters to PDF Pages

Now it's time to process the uploaded PDF.

Once users finish configuring their filter layers, the application renders every selected PDF page onto an HTML canvas, applies the configured filters in sequence, and generates a brand-new PDF using PDF-lib.

Unlike previous projects that applied only one effect, this Filter Studio supports multiple filter layers, allowing users to build their own image-processing pipeline.

Building the Canvas Filter String

The HTML Canvas API allows multiple filters to be combined into a single filter string.

Start with an empty string.

let filterString = "";

Loop through every filter layer.

filters.forEach(filter => {
    filterString += `${filter.type}
(${filter.value})
`;
});

Assign the completed filter string.

context.filter = filterString.trim();

Every active layer is now combined before rendering the page.

Drawing the Filtered Page

Once the filter string has been created, redraw the rendered PDF page.

context.drawImage(pdfCanvas, 0, 0);

The canvas now contains the filtered version of the page.

This approach allows several adjustments to be applied in a single rendering pass.

Applying Multiple Filter Layers

Since every adjustment is stored inside the filters array, users can combine effects however they like.

For example:

filters = [
    {
        type: "brightness",
        value: "130%"
    },
    {
        type: "contrast",
        value: "115%"
    },
    {
        type: "blur",
        value: "5px"
    }
];

These filters are automatically combined into one Canvas filter string before rendering.

This makes the application flexible while keeping the code simple.

Applying Preset Effects

Preset buttons simply replace the current filter list with predefined values.

Example for the Sepia preset:

filters = [
    {
        type: "sepia",
        value: "100%"
    }
];

updatePreview();

Likewise, the Glow preset may combine brightness and blur.

filters = [
    {
        type: "brightness",
        value: "125%"
    },
    {
        type: "blur",
        value: "2px"
    }
];

Preset effects save users time while still allowing manual adjustments afterward.

Processing Selected Pages

Once the filters are ready, process only the pages selected by the user.

for (const page of selectedPages) {
    await processPage(page);
}

If Current Page Only is selected, only the active page is processed.

If All Pages is selected, the loop processes every page in the document.

If users specify custom page numbers, only those pages are filtered.

Applying Filters

Users begin processing by clicking Apply Filters to PDF.

Create the action button.

<button id="applyFilters">Apply Filters to PDF</button>

Start processing.

applyFilters.addEventListener("click", async () => {
    await generatePdf();
});

While processing, display a loading indicator so users know the application is working.

Generating the Final PDF

Create a new PDF document.

const outputPdf = await PDFLib.PDFDocument.create();

Convert the filtered canvas into an image.

const imageBytes = await canvasToBytes(previewCanvas);

Embed the image.

const image = await outputPdf.embedPng(imageBytes);

Create a page.

const page = outputPdf.addPage([
    image.width,
    image.height
]);

Draw the processed image.

page.drawImage(image, {
    x: 0,
    y: 0,
    width: image.width,
    height: image.height
});

Repeat this process until every selected page has been added to the new PDF.

Saving the PDF

Once all pages have been processed, save the completed document.

const pdfBytes = await outputPdf.save();

Create the downloadable file.

generatedPdf = new Blob([pdfBytes], {
    type: "application/pdf"
});

The generated PDF is now ready for preview and download.

Previewing the Filtered Document

Before downloading, the application displays the processed PDF so users can verify the applied filters.

The preview includes page navigation and rotation controls, making it easy to inspect the final result before saving the file.

Starting Over

If users want to process another document, they can reset the application with a single click.

resetButton.addEventListener("click", () => {
    location.reload();
});

Reloading clears the uploaded PDF, removes all filter layers, resets preset effects, and returns the application to its initial upload screen.

Previewing the Result

Before downloading the edited document, it's helpful to let users review the processed PDF. This gives them an opportunity to verify that every selected filter has been applied correctly and make adjustments if necessary.

Load the generated PDF.

let finalPdf = null;

async function showPreview() {
    const bytes = await generatedPdf.arrayBuffer();

    finalPdf = await pdfjsLib.getDocument({
        data: bytes
    }).promise;

    renderPreviewPage(1);
}

Render the selected page.

async function renderPreviewPage(pageNumber) {
    const page = await finalPdf.getPage(pageNumber);
    const viewport = page.getViewport({
        scale: 1.5
    });

    previewCanvas.width = viewport.width;
    previewCanvas.height = viewport.height;

    await page.render({
        canvasContext: previewCanvas.getContext("2d"),
        viewport
    }).promise;
}

Users can browse every processed page before downloading the finished PDF.

Renaming and Downloading

Before saving the generated PDF, users can choose a custom filename.

Create the filename input.

<input type="text" id="outputFilename" value="filtered-document.pdf">

Retrieve the filename.

function getFilename() {
    let filename = outputFilename.value.trim();

    if (!filename) {
        filename = "filtered-document.pdf";
    }

    if (!filename.toLowerCase().endsWith(".pdf")) {
        filename += ".pdf";
    }

    return filename;
}

Display useful information about the generated PDF.

pageCount.textContent = `${finalPdf.numPages} Pages`;
fileSize.textContent = formatFileSize(generatedPdf.size);

Download the document.

downloadButton.addEventListener("click", () => {
    const url = URL.createObjectURL(generatedPdf);
    const link = document.createElement("a");

    link.href = url;
    link.download = getFilename();
    link.click();

    URL.revokeObjectURL(url);
});

Everything happens locally inside the browser, helping protect users' documents and reducing upload time.

Demo: How the PDF Filter Studio Works

The complete workflow consists of just a few steps.

Step 1: Upload the PDF

Users begin by dragging a PDF into the upload area or clicking Select PDF.

Step 2: Preview the PDF

The uploaded document is rendered page by page using PDF.js. Users can navigate through the document and rotate pages before editing.

Step 3: Configure the Filters

Users create one or more filter layers, adjust brightness, contrast, saturation, blur, opacity, grayscale, sepia, invert colors, hue rotation, or apply preset effects.

Step 4: Apply the Filters

Click Apply Filters to PDF to process the selected pages.

Step 5: Review the Result

The completed PDF appears in the preview window for final verification.

Step 6: Rename and Download

Finally, users rename the output file if necessary, review the page count and file size, and download the edited PDF.

Performance Tips

Applying multiple filters to high-resolution PDF pages can increase processing time. Instead of processing the entire document every time, process only the selected pages.

for (const page of selectedPages) {
    await processPage(page);
}

Build the Canvas filter string only when filter values change instead of rebuilding it for every render.

context.filter = buildFilterString(filters);

After downloading the finished document, release temporary object URLs to free memory.

URL.revokeObjectURL(downloadUrl);

These optimizations help keep the application responsive, even when working with large multi-page PDF documents.

Common Mistakes

One common mistake is drawing a filtered page on top of an already filtered canvas. Always render the original PDF page before applying a new filter configuration.

await renderPage(currentPage);

Another issue is forgetting to reset the Canvas filter after processing.

context.filter = "none";

Finally, stacking too many heavy filters (such as Blur, Glow, and multiple contrast adjustments) can increase processing time and produce unexpected visual results. Applying only the filters you actually need generally produces cleaner output and better performance.

Conclusion

In this tutorial, you built a browser-based PDF Filter Studio using JavaScript.

You learned how to upload PDF documents, render pages with PDF.js, create reusable filter layers, apply brightness, contrast, saturation, blur, opacity, grayscale, sepia, invert colors, and hue rotation effects using the Canvas API, generate a new PDF with PDF-lib, preview the processed document, rename the output file, and download it directly from the browser.

Unlike single-purpose PDF editing tools, this project allows users to combine multiple visual effects into a flexible editing workflow while keeping all processing local to the browser.

You can explore the complete workflow using the PDF Filter Studio.

From here, you can extend the application with custom filter presets, AI-powered image enhancement, selective region filters, watermark overlays, or batch processing to create an even more powerful browser-based PDF editor.

In other situations, designers, developers, and print professionals may want to inspect how a document looks with inverted colors or prepare alternative versions for accessibility and review.

A PDF Color Inverter Tool makes this possible by transforming the colors of PDF pages while keeping the document structure intact. Instead of editing every image or graphic manually, users can upload a PDF, invert its colors, preview the results, and download a newly generated document in just a few clicks.

In this tutorial, you'll build a browser-based PDF Color Inverter Tool using JavaScript. Users will be able to upload a PDF, preview its pages, choose an inversion mode, specify the page range to process, adjust the output quality, enable live preview, generate the inverted PDF, review the result, rename the output file, and download it, all without uploading the document to a server.

We'll use PDF.js to render PDF pages inside the browser, the HTML Canvas API to manipulate pixel colors, and PDF-lib to generate the final PDF.

By the end of this tutorial, you'll have a fully functional client-side PDF color inversion tool similar to the one available on my site All In One Tools.

Table of Contents

• What This PDF Color Inverter Tool Does and How It Works

• Project Setup

• Creating the HTML Layout

• Uploading and Previewing PDFs

• Building the Color Inversion Settings

• Inverting PDF Colors

• Generating the Final PDF

• Previewing the Result

• Renaming and Downloading

• Demo: How the PDF Color Inverter Tool Works

• Performance Tips

• Common Mistakes

• Conclusion

What This PDF Color Inverter Tool Does and How It Works

A PDF Color Inverter Tool changes the appearance of a PDF by reversing the colors of its pages. Light colors become dark, dark colors become light, and every pixel is recalculated to create an inverted version of the original document. This can improve readability in certain environments, help preview designs in dark mode, or simply provide an alternative way to view a document.

In this project, users can upload a PDF, browse through every page, choose how the colors should be inverted, define the page range to process, select the output quality, enable a live preview, generate the inverted document, rename the output file, and download the finished PDF. Since all processing happens locally inside the browser, the original document never leaves the user's device.

Behind the scenes, PDF.js renders each PDF page onto an HTML canvas. Once a page is rendered, JavaScript accesses the pixel data using the Canvas API. Every pixel's red, green, and blue values are recalculated to create the inverted version of the page.

After processing all selected pages, PDF-lib assembles the modified pages into a new PDF that users can preview and download.

A single pixel is represented by four values:

const pixel = {

    red: 120,

    green: 85,

    blue: 200,

    alpha: 255

};

During color inversion, each color channel is transformed by subtracting its value from 255.

red = 255 - red;

green = 255 - green;

blue = 255 - blue;

Repeating this calculation for every pixel on every selected page produces the final inverted PDF while preserving the document's layout, page order, and dimensions.

Project Setup

Before writing any image-processing code, let's create a simple project structure for our PDF Color Inverter Tool.

We'll build the application using plain HTML, CSS, and JavaScript together with two libraries:

• PDF.js for rendering PDF pages inside the browser.

• PDF-lib for generating the final inverted PDF.

Our project structure looks like this:

pdf-color-inverter/

│── index.html
│── style.css
│── script.js
│── pdf.worker.min.js
│── assets/

Keeping everything separated makes the application easier to understand and maintain.

Include the required libraries before loading your own JavaScript.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.js"></script>

<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

<script src="script.js"></script>

Configure the PDF.js worker.

pdfjsLib.GlobalWorkerOptions.workerSrc =
    "pdf.worker.min.js";

Running PDF.js inside a worker keeps the browser responsive while rendering large PDF files.

Creating the HTML Layout

The application contains four primary sections:

• Upload area

• Settings panel

• PDF preview

• Result section

Create the basic structure.

<section id="uploadSection"></section>

<section id="settingsSection" hidden></section>

<section id="previewSection" hidden></section>

<section id="resultSection" hidden></section>

Only the upload area is visible when the page first loads.

After a PDF has been selected, the remaining sections become available.

Selecting the Main Elements

Store references to the elements used throughout the application.

const uploadSection =
document.getElementById(
    "uploadSection"
);

const settingsSection =
document.getElementById(
    "settingsSection"
);

const previewSection =
document.getElementById(
    "previewSection"
);

const resultSection =
document.getElementById(
    "resultSection"
);

const pdfCanvas =
document.getElementById(
    "pdfCanvas"
);

These references make it easy to switch between different stages of the workflow.

Uploading and Previewing PDFs

The upload area accepts drag-and-drop as well as manual file selection.

When a file is selected, verify that it's actually a PDF.

async function handleUpload(
    file
) {

    if (
        !file ||
        file.type !==
        "application/pdf"
    ) {

        alert(
            "Please select a PDF file."
        );

        return;

    }

    await loadPdf(file);

}

If the file passes validation, the browser loads it into memory.

Supporting Password-Protected PDFs

Some documents are protected with a password.

The upload screen provides an optional password field before processing begins.

Retrieve the entered password.

const password =
document
.getElementById(
    "pdfPassword"
)
.value
.trim();

Pass the password to PDF.js while loading the document.

const loadingTask =
pdfjsLib.getDocument({

    data: pdfBytes,

    password

});

pdfDocument =
await loadingTask.promise;

If the document isn't password protected, the password field can simply remain empty.

Loading the PDF

Convert the uploaded file into an ArrayBuffer.

async function loadPdf(
    file
) {

    originalPdfBytes =
    await file.arrayBuffer();

    pdfDocument =
    await pdfjsLib
        .getDocument({

            data:
            originalPdfBytes

        })
        .promise;

    currentPage = 1;

    await renderPage(
        currentPage
    );

}

The original bytes are preserved because they'll later be used to generate the inverted PDF.

Rendering PDF Pages

PDF.js renders one page at a time.

Retrieve the requested page.

async function renderPage(
    pageNumber
) {

    const page =
    await pdfDocument.getPage(
        pageNumber
    );

    const viewport =
    page.getViewport({

        scale: 1.5

    });

Resize the canvas.

pdfCanvas.width =
viewport.width;

pdfCanvas.height =
viewport.height;

Render the page.

await page.render({

    canvasContext:

    pdfCanvas.getContext(
        "2d"
    ),

    viewport

}).promise;

After rendering completes, the selected page becomes visible inside the preview area.

Navigating Between Pages

Most documents contain multiple pages, so the preview includes Previous and Next buttons.

Create the page state.

let currentPage = 1;

let pdfDocument = null;

Move to the previous page.

previousButton
.addEventListener(

"click",

async () => {

    if (
        currentPage > 1
    ) {

        currentPage--;

        await renderPage(
            currentPage
        );

    }

});

Move to the next page.

nextButton
.addEventListener(

"click",

async () => {

    if (

        currentPage <

        pdfDocument.numPages

    ) {

        currentPage++;

        await renderPage(
            currentPage
        );

    }

});

Update the page indicator.

pageNumber.textContent =

`Page ${currentPage} of ${pdfDocument.numPages}`;

This allows users to browse through the document before choosing which pages should have their colors inverted.

Building the Color Inversion Settings

Before processing the PDF, users should be able to control how the colors are inverted. The settings panel lets users choose the inversion mode, specify which pages should be processed, select the output quality, enable a live preview, or reset everything and start over.

Choosing the Inversion Mode

The first option allows users to choose how the document colors should be inverted.

Create the dropdown.

<select id="invertMode">

    <option value="full">

        Full Invert

    </option>

</select>

Read the selected mode.

const inversionMode =

document
.getElementById(
    "invertMode"
)
.value;

The selected value determines which color transformation is applied during processing.

Selecting the Page Range

Sometimes users only need to invert a few pages instead of the entire document.

Create two input fields.

<input

type="number"

id="startPage"

min="1">

<input

type="number"

id="endPage"

min="1">

Retrieve the selected pages.

const startPage =

Number(
startPageInput.value
);

const endPage =

Number(
endPageInput.value
);

Only the pages inside this range will be processed when generating the final PDF.

Choosing the Output Quality

The tool provides multiple quality levels so users can balance image quality and file size.

Create the quality selector.

<select id="outputQuality">

    <option value="low">

        Low (Smaller Size)

    </option>

    <option value="medium">

        Medium

    </option>

    <option value="high">

        High (Best Quality)

    </option>

</select>

Read the selected quality.

const quality =

document
.getElementById(
    "outputQuality"
)
.value;

The selected value will later determine the image quality used while generating the new PDF.

Enabling Live Preview

The Live Preview switch lets users instantly see the inverted colors without generating a new PDF.

Create the toggle.

<input

type="checkbox"

id="livePreview">

Read its state.

const livePreview =

document
.getElementById(
    "livePreview"
)
.checked;

Whenever the setting changes, refresh the preview.

livePreviewToggle
.addEventListener(

"change",

updatePreview

);

When enabled, the preview canvas updates automatically as users change the inversion settings.

Resetting the Settings

The Reset button clears the current configuration so users can begin again without reloading the page.

Create the button.

<button id="resetButton">

Reset / Clear

</button>

Restore the default values.

function resetSettings() {

    invertMode.value =
    "full";

    outputQuality.value =
    "high";

    livePreview.checked =
    false;

}

Attach the event listener.

resetButton
.addEventListener(

"click",

resetSettings

);

This returns the settings panel to its initial state.

Starting the Color Inversion

Once the settings have been reviewed, users can begin processing the document.

Create the action button.

<button id="invertPdf">

Invert PDF Colors

</button>

Start the inversion process.

invertButton
.addEventListener(

"click",

async () => {

    await invertPdf();

});

Inverting PDF Colors

Now we'll build the core feature of the application: reversing the colors of each PDF page.

The workflow is straightforward. First, PDF.js renders a page onto an HTML canvas. Next, JavaScript reads every pixel from the canvas, inverts its red, green, and blue values, and writes the updated pixels back. Finally, the processed page is added to a new PDF using PDF-lib.

Reading Canvas Pixel Data

Once a page has been rendered, retrieve its pixel information.

const imageData =

context.getImageData(

    0,

    0,

    canvas.width,

    canvas.height

);

Each pixel consists of four values:

• Red

• Green

• Blue

• Alpha (Transparency)

The pixel data is stored inside an array.

const pixels =
imageData.data;

We'll modify this array directly.

Inverting Every Pixel

To invert a color, subtract each RGB value from 255.

Loop through every pixel.

for (

    let i = 0;

    i < pixels.length;

    i += 4

) {

    pixels[i] =
    255 - pixels[i];

    pixels[i + 1] =
    255 - pixels[i + 1];

    pixels[i + 2] =
    255 - pixels[i + 2];

}

The alpha channel remains unchanged so transparent elements continue to render correctly.

After updating every pixel, write the modified image back onto the canvas.

context.putImageData(

    imageData,

    0,

    0

);

The page preview now displays the inverted colors.

Updating the Live Preview

If Live Preview is enabled, users should immediately see the changes without generating a new PDF.

Check whether the feature is active.

if (

    livePreview.checked

) {

    await invertCurrentPage();

}

Whenever users change the inversion mode, page range, or quality settings, refresh the preview.

async function updatePreview() {

    await renderPage(

        currentPage

    );

    await invertCurrentPage();

}

Processing the Selected Pages

Instead of processing the entire document every time, only invert the pages selected by the user.

Loop through the chosen page range.

for (

    let page = startPage;

    page <= endPage;

    page++

) {

    await processPage(
        page
    );

}

Each processed page is temporarily stored before generating the final PDF.

Generating the Final PDF

Create a new PDF document.

const outputPdf =

await PDFLib
.PDFDocument
.create();

Convert the processed canvas into an image.

const imageBytes =

await canvasToBytes(
    pdfCanvas
);

Embed the image.

const image =

await outputPdf
.embedPng(
    imageBytes
);

Create a page.

const page =

outputPdf.addPage([

    image.width,

    image.height

]);

Draw the processed image.

page.drawImage(

    image,

    {

        x: 0,

        y: 0,

        width: image.width,

        height: image.height

    }

);

Repeat these steps for every selected page.

Saving the Finished PDF

Once all pages have been processed, save the completed document.

const pdfBytes =

await outputPdf.save();

Convert the generated bytes into a downloadable file.

generatedPdfBlob =

new Blob(

    [pdfBytes],

    {

        type:
        "application/pdf"

    }

);

The generated PDF is now ready for preview and download.

Previewing the Result

Before downloading the processed document, it's useful to let users review the final output. This allows them to verify that the selected pages have been inverted correctly and that the document appears as expected.

Load the generated PDF into PDF.js.

async function showPreview() {

    const bytes =
        await generatedPdfBlob
            .arrayBuffer();

    finalPdf =
        await pdfjsLib
            .getDocument({

                data: bytes

            })
            .promise;

    renderFinalPage(1);

}

Render the selected page.

async function renderFinalPage(
    pageNumber
) {

    const page =
        await finalPdf.getPage(
            pageNumber
        );

    const viewport =
        page.getViewport({

            scale: 1.5

        });

    finalCanvas.width =
        viewport.width;

    finalCanvas.height =
        viewport.height;

    await page.render({

        canvasContext:
        finalCanvas
            .getContext("2d"),

        viewport

    }).promise;

}

Users can browse through the processed document before downloading it.

Renaming and Downloading

Before saving the PDF, users can provide a custom filename.

Create the filename field.

<input

type="text"

id="outputFilename"

value="inverted-document.pdf">

Retrieve the filename.

function getFilename() {

    let filename =

    outputFilename
        .value
        .trim();

    if (!filename) {

        filename =
        "inverted-document.pdf";

    }

    if (
        !filename
        .endsWith(".pdf")
    ) {

        filename += ".pdf";

    }

    return filename;

}

Display additional file information.

pageCount.textContent =

`${finalPdf.numPages} Pages`;

fileSize.textContent =

formatFileSize(

    generatedPdfBlob.size

);

Download the generated PDF.

downloadButton
.addEventListener(

"click",

() => {

    const url =

    URL.createObjectURL(
        generatedPdfBlob
    );

    const link =
        document.createElement(
            "a"
        );

    link.href =
        url;

    link.download =
        getFilename();

    link.click();

    URL.revokeObjectURL(
        url
    );

});

Everything happens locally inside the browser, so users can download the processed PDF immediately after reviewing it.

Demo: How the PDF Color Inverter Tool Works

Let's walk through the complete workflow.

Step 1: Upload the PDF

Users begin by dragging a PDF into the upload area or clicking Select PDF. If the document is password protected, the password can be entered before loading.

Step 2: Preview the Document

The uploaded PDF is rendered page by page, allowing users to browse the document before making any changes.

Step 3: Configure the Settings

Users choose the page range, output quality, and whether Live Preview should be enabled.

Step 4: Preview the Inverted Colors

When Live Preview is enabled, the current page updates immediately so users can review the inverted appearance before processing the complete document.

Step 5: Generate the PDF

Clicking Invert PDF Colors processes the selected pages and creates a new PDF containing the inverted pages.

Step 6: Review and Download

The generated PDF appears in the final preview. Users can rename the output file, review the page count and file size, and download the completed document.

Performance Tips

Large PDF files can require additional processing time. Rendering only the current page, updating the preview instead of reloading the entire document, and processing only the selected page range can significantly improve performance.

for (

    let page = startPage;

    page <= endPage;

    page++

) {

    await processPage(
        page
    );

}

After the download completes, release temporary resources.

URL.revokeObjectURL(
    downloadUrl
);

These small optimizations help keep the application responsive, even when processing large PDF files.

Common Mistakes

A common mistake is modifying the original canvas repeatedly without first rendering a fresh copy of the PDF page. This can cause colors to be inverted multiple times.

Always render the original page before applying another inversion.

await renderPage(
    currentPage
);

Another issue is processing page numbers outside the valid range.

if (

    pageNumber < 1 ||

    pageNumber >

    pdfDocument.numPages

) {

    return;

}

Finally, remember that higher output quality generally produces larger PDF files. Users should choose a quality level that balances image clarity and file size for their specific needs.

Conclusion

In this tutorial, you built a browser-based PDF Color Inverter Tool using JavaScript.

You learned how to upload PDF documents, support password-protected files, render pages with PDF.js, manipulate pixel colors using the HTML Canvas API, generate a new PDF with PDF-lib, preview the completed document, rename the output file, and download it directly from the browser.

Because all processing takes place locally, users can invert PDF colors without uploading sensitive documents to an external server.

You can explore the complete workflow using the PDF Color Inverter Tool.

This project can be extended further by adding custom color filters, selective page previews, brightness and contrast adjustments, grayscale conversion, sepia effects, batch processing, or additional document enhancement tools.

While these images are easy to view, extracting them individually isn't always simple. Many users rely on screenshots or manual cropping, which can reduce image quality and take unnecessary time.

In this tutorial, you'll build a browser-based PDF Image Extractor using JavaScript. The application lets users upload a PDF, preview its pages, extract embedded images, organize them by page, and download individual images or all extracted images at once.

Everything runs directly inside the browser, so uploaded documents never leave the user's device. This makes the tool fast, private, and easy to use without requiring a backend server.

By the end of this tutorial, you'll have a fully functional PDF Image Extractor capable of recovering embedded images while preserving their original quality.

Table of Contents

• Why Extract Images from PDFs?

• How Images Are Stored Inside PDF Files

• Understanding Embedded Images vs Rendered Pages

• Project Setup

• What Libraries Are We Using?

• Creating the Upload Interface

• Previewing Uploaded PDF Pages

• Finding Embedded Images

• Extracting Images from PDF Pages

• Displaying Extracted Images

• Downloading Individual Images

• Downloading All Images from the PDF

• Demo: How the PDF Image Extractor Works

• Performance Optimization Tips

• Important Notes from Real-World Use

• Common Mistakes to Avoid

• Conclusion

Why Extract Images from PDFs?

Although PDF documents are primarily designed for sharing text-based information, they often contain valuable visual assets. Product catalogs include product photographs, annual reports contain charts and graphs, presentations use icons and illustrations, brochures showcase marketing banners, and technical manuals include diagrams and engineering drawings.

Without a dedicated image extraction tool, users often take screenshots or manually crop pages to save these visuals. Unfortunately, screenshots usually reduce image quality, introduce unwanted page elements, and require significant manual effort when working with large documents.

A PDF Image Extractor automates this process by identifying every embedded image inside the document and separating it from the surrounding page content. Instead of copying an entire page, users receive individual image files that can be downloaded and reused immediately.

This capability is extremely useful across many industries.

Graphic designers frequently receive client brochures, advertisements, and presentation files that contain logos, icons, or promotional graphics. Instead of recreating those assets manually, they can extract the original images directly from the PDF and continue working with high-quality source files.

Marketing teams often work with catalogs, product flyers, promotional leaflets, and campaign reports. Extracting product photographs or promotional graphics saves considerable time when creating social media posts, advertisements, landing pages, or newsletters.

Publishers and content creators regularly receive PDF magazines, ebooks, newsletters, and educational material containing illustrations and infographics. Individual images can be extracted and reused without manually cropping every page.

Researchers frequently download scientific papers containing graphs, charts, microscopy images, satellite photographs, and experimental diagrams. Image extraction allows them to save those visuals separately for presentations, publications, or further analysis.

Educational institutions use image extraction when preparing teaching material. Teachers can reuse diagrams, mathematical figures, scientific illustrations, historical maps, or educational graphics from reference documents without recreating them from scratch.

Government departments often maintain scanned archives containing seals, stamps, signatures, photographs, maps, engineering plans, and official diagrams. Extracting these images individually simplifies document digitization and archival workflows.

E-commerce businesses can also benefit significantly from image extraction. For example, a seller may receive a supplier catalog in PDF format containing hundreds of product photographs. Instead of requesting every image separately, the seller can extract all embedded product images from the catalog within minutes and reuse them while preparing listings for platforms such as Amazon, Flipkart, Meesho, Shopify, or WooCommerce.

Businesses working with invoices and purchase documents can also recover company logos, QR codes, signatures, and barcode images for document verification or automation systems.

Because this application performs every operation locally inside the browser, sensitive business documents remain private while users quickly recover all embedded images from their PDFs.

How Images Are Stored Inside PDF Files

Many people assume that a PDF page is simply a picture of the document. In reality, PDF files are much more sophisticated.

Each page inside a PDF is built from multiple independent objects. Text is stored separately using fonts and character information. Lines and shapes are represented as vector drawing instructions. Images are embedded as independent image objects that are placed at specific positions on the page.

This separation is one of the reasons PDFs remain flexible and efficient. A document may contain dozens of pages while reusing the same company logo or icon multiple times without storing duplicate copies.

When an image is embedded inside a PDF, the file usually preserves information such as the image dimensions, color space, compression method, and image format. Depending on how the document was created, embedded images may use formats such as JPEG, PNG, JPEG2000, CCITT, or other PDF-supported image encodings.

A PDF Image Extractor scans the internal structure of the document to locate these embedded image objects. Instead of capturing the entire page as a screenshot, it retrieves each image individually whenever possible.

This approach preserves much higher quality because the original embedded image is recovered rather than recreating it from the rendered page.

Understanding how PDF files store images also explains why some documents contain dozens of extractable images while others contain none at all. If a PDF consists entirely of vector graphics or text, there may be no embedded raster images available for extraction.

Knowing the difference between these document structures helps developers build more accurate PDF processing tools while helping users understand the capabilities and limitations of image extraction.

Understanding Embedded Images vs Rendered Pages

One of the most common misconceptions about PDF image extraction is that every visible picture on a page can always be extracted as a separate image.

In reality, there is an important difference between embedded images and rendered page images.

An embedded image is an independent object stored inside the PDF document. These images usually retain their original quality and can often be extracted without any loss of resolution.

A rendered page, on the other hand, is simply a visual representation of everything that appears on the page. When PDF.js displays a page inside the browser, it combines text, vector graphics, images, backgrounds, and shapes into a single canvas. Although this rendered page looks identical to the original document, it's no longer separated into individual components.

For example, imagine a product catalog containing a company logo, five product photographs, several icons, and descriptive text.

The PDF page preview displays everything together as one complete page. However, the PDF Image Extractor scans the document internally and identifies the individual logo, each product photograph, and every embedded icon separately. This allows users to download each image individually instead of cropping screenshots from the page preview.

Another important point is that not every visible graphic is actually an image.

Some company logos are created entirely using vector drawing commands. Charts may also be generated using vector graphics rather than bitmap images. Since these objects are not stored as raster images, they can't always be extracted using an image extraction tool.

Understanding this distinction helps explain why image extraction results may differ between documents even when they appear visually similar.

For developers, learning how embedded resources differ from rendered pages provides a much deeper understanding of PDF internals and browser-based document processing.

Project Setup

We'll build the PDF Image Extractor using standard web technologies so that the entire application runs directly inside the browser without requiring a backend server.

The project consists of a simple HTML file for the interface, a CSS file for styling, and a JavaScript file that handles PDF loading, page rendering, image extraction, and downloading.

Create the following project structure:

pdf-image-extractor/

│── index.html

│── style.css

│── script.js

│── assets/

After creating the project, include the required JavaScript libraries inside your index.html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.js"></script>

<script src="https://unpkg.com/pdf-lib"></script>

<script src="script.js"></script>

Once these files are ready, the browser will have everything required to read PDF files, render document pages, inspect PDF objects, locate embedded images, and generate downloadable image files.

Keeping the project lightweight also makes it easier to understand each stage of the image extraction workflow.

What Libraries Are We Using?

Extracting images from PDF documents requires more than simply displaying PDF pages inside the browser. The application needs to load the document, inspect its internal structure, render preview pages, and recover embedded image objects.

To accomplish this, we'll use two JavaScript libraries.

The first library is PDF.js.

PDF.js is Mozilla's open-source PDF rendering engine. It allows browsers to load PDF documents without additional plugins and provides APIs for reading document pages, rendering previews, accessing page objects, and inspecting document resources.

In this project, PDF.js is responsible for loading the uploaded PDF and generating the page preview shown to the user before image extraction begins.

The second library is PDF-lib.

PDF-lib provides low-level access to PDF objects and document resources. Although it's widely used for editing PDF files, it's also useful when working with embedded objects and document manipulation. It complements PDF.js by giving developers additional flexibility when extending the application with future PDF editing features.

Together, these libraries allow us to create a browser-based image extraction workflow that is fast, secure, and completely client-side.

The following code initializes PDF.js:

pdfjsLib.GlobalWorkerOptions.workerSrc =

"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.worker.min.js";

Loading the worker separately keeps PDF rendering responsive while large documents are processed.

Creating the Upload Interface

Every document processing application begins with uploading a file.

The upload interface is responsible for accepting PDF documents, validating the selected file, and preparing it for processing. A clean upload experience is important because it becomes the entry point for the entire application.

In this project, users can either drag a PDF onto the upload area or browse for a document using the standard file picker.

Once the file has been selected, the browser immediately verifies that it's a valid PDF before attempting to load it.

Supporting both drag-and-drop uploads and manual file selection provides a familiar experience across desktop and mobile devices.

The upload section also displays clear instructions so first-time users understand exactly how to begin extracting images.

Create the upload area using the following HTML:

<div id="dropZone" class="drop-zone">

    <div class="upload-icon">

        ☁

    </div>

    <h2>Drag & Drop PDF Here</h2>

    <p>Or click to browse file</p>

    <button id="selectBtn">

        Select PDF

    </button>

    <input

        type="file"

        id="pdfFile"

        accept="application/pdf"

        hidden>

</div>

Next, validate the uploaded document:

const file = pdfFile.files[0];

if(!file){

    return;

}

if(file.type !== "application/pdf"){

    alert("Please upload a valid PDF.");

    return;

}

After validation succeeds, the browser reads the uploaded file:

const buffer =

await file.arrayBuffer();

loadPDF(buffer);

At this point, the PDF has been loaded into memory and is ready for preview generation.

Previewing Uploaded PDF Pages

Before extracting images, users should first verify that they uploaded the correct document.

Instead of immediately scanning the PDF, the application generates thumbnail previews for every page. These previews help users confirm page order, inspect the document contents, and estimate where embedded images are located.

Preview generation is particularly useful for large reports, product catalogs, presentations, magazines, brochures, ebooks, and technical documentation containing dozens of pages.

Each preview is rendered using PDF.js and displayed inside a responsive grid layout.

First, load the uploaded document:

const pdf = await pdfjsLib

.getDocument({

    data:buffer

})

.promise;

Next, loop through every page:

for(

let pageNumber = 1;

pageNumber <= pdf.numPages;

pageNumber++

){

    renderPage(pageNumber);

}

Render the page as a canvas:

const page =

await pdf.getPage(pageNumber);

const viewport =

page.getViewport({

    scale:0.35

});

const canvas =

document.createElement("canvas");

canvas.width = viewport.width;

canvas.height = viewport.height;

await page.render({

    canvasContext:

    canvas.getContext("2d"),

    viewport

}).promise;

Finally, add the preview to the page:

previewContainer

.appendChild(canvas);

Once rendering is complete, every page becomes visible inside the preview area.

Users can scroll through the thumbnails and verify that the correct document has been uploaded before starting the extraction process.

Although the preview displays complete page images, no extraction has occurred yet. The next stage scans the internal PDF structure to locate every embedded image separately.

Why Previewing the PDF Matters

Previewing the uploaded document may seem like a small feature, but it greatly improves the overall user experience.

Without a preview, users have no way to verify that they selected the correct file before extraction begins. This becomes especially important when working with multiple PDFs that have similar filenames.

Page previews also help users estimate where images appear throughout the document. For example, a product catalog may contain photographs only on certain pages, while a technical report might include diagrams only within specific chapters.

By reviewing the page thumbnails first, users gain confidence that the document is correct before the application begins scanning for embedded images.

This simple verification step reduces mistakes, avoids unnecessary processing, and makes the overall workflow feel much more intuitive.

Finding Embedded Images

Once the PDF pages have been rendered and displayed in the preview section, the application is ready to search for embedded images.

This stage is different from generating page previews. The preview simply renders each page as a complete visual image, while the extraction process examines the internal structure of the PDF to locate every embedded image object stored inside the document.

Each page is scanned individually. If embedded images are found, the application records their location, dimensions, image format, and page number before preparing them for extraction.

This page-by-page approach makes it easier to organize the extracted images later and allows users to understand exactly where each image originated within the document.

Scanning only begins after users click the Extract Images button, ensuring that unnecessary processing is avoided if they simply want to preview the document.

First, create the click event for the extraction button:

document

.getElementById(

"extractBtn"

)

.addEventListener(

"click",

extractImages

);

Next, loop through every page inside the uploaded PDF:

for(

let pageNumber = 1;

pageNumber <= pdf.numPages;

pageNumber++

){

    const page =

    await pdf.getPage(

    pageNumber

    );

}

Read the page operator list:

const operatorList =

await page.getOperatorList();

Now inspect every drawing operation to determine whether it contains an embedded image:

operatorList.fnArray

.forEach(operation=>{

    if(

    operation ===

    pdfjsLib.OPS.paintImageXObject

    ){

        console.log(

        "Image Found"

        );

    }

});

After every page has been scanned, the application creates a collection containing all discovered images grouped by page.

This collection becomes the foundation for the extraction process that follows.

Extracting Images from PDF Pages

Once embedded image objects have been identified, the application begins extracting them from the PDF.

Unlike taking screenshots of an entire page, this method retrieves each embedded image individually whenever possible. As a result, the extracted images preserve their original quality, dimensions, and compression rather than inheriting the resolution of the page preview.

Each image is assigned to the page where it was found. Organizing images this way makes it much easier for users to locate graphics inside large reports, magazines, brochures, presentations, catalogs, technical manuals, and research papers.

As each page finishes processing, its extracted images are stored inside a JavaScript array before being displayed inside the browser.

Create an array for storing extracted images:

const extractedImages = [];

Save every discovered image:

extractedImages.push({

    page:

    pageNumber,

    image:

    imageData,

    type:

    imageType

});

Each stored object contains useful information that will later be displayed to the user.

The extraction routine continues until every page inside the uploaded PDF has been inspected.

Once complete, the browser immediately displays the extracted images without requiring another processing step.

Displaying Extracted Images

After extraction finishes, the application presents every recovered image inside an organized gallery.

Instead of displaying one long collection of images, the results are grouped according to the page from which they were extracted. This organization makes it much easier to understand the original document structure.

For every extracted image, the application displays a preview together with useful technical information.

Users can immediately see the image dimensions, image format, and the page where the image originated. This additional information helps determine whether an image is suitable for reuse before downloading it.

For example, a high-resolution product photograph may be useful for marketing material, while a small company logo may only be appropriate for branding purposes.

Loop through every extracted image:

extractedImages.forEach(image=>{

    renderImageCard(

    image

    );

});

Create the preview card:

const card =

document.createElement(

"div"

);

card.className =

"image-card";

Insert the preview:

const img =

document.createElement(

"img"

);

img.src =

image.image;

Display the image information:

details.innerHTML =

`

Dims:

${image.width} × ${image.height}

<br>

Type:

${image.type}

`;

Once every card has been created, the gallery displays all extracted images grouped beneath their respective pages.

This layout provides a clean overview of every image contained inside the uploaded PDF while making individual downloads straightforward.

Downloading Individual Images

Many users don't need every image contained inside a PDF.

For example, a designer may only want the company logo from a brochure, while a researcher may only need one graph from a scientific paper.

To support these workflows, every extracted image includes its own download button.

When clicked, the browser downloads only the selected image without affecting any of the remaining extracted images.

This allows users to quickly save exactly the graphics they need.

Create a download button:

const button =

document.createElement(

"button"

);

button.innerText =

"Download";

Attach the download event:

button.onclick = ()=>{

    downloadImage(

    image

    );

};

Generate the download:

const link =

document.createElement(

"a"

);

link.href =

image.image;

link.download =

image.fileName;

link.click();

Providing separate download buttons makes the application much more flexible because users can save only the images they actually need instead of downloading every extracted asset.

Downloading All Images from the PDF

Large PDF documents often contain dozens or even hundreds of embedded images.

Downloading every image individually would be both slow and repetitive.

To simplify this workflow, the application also includes a Download All Images from PDF button.

After extraction has completed, clicking this button automatically downloads every extracted image from every page.

This feature is particularly useful when working with supplier catalogs, product brochures, magazines, annual reports, technical documentation, ebooks, educational material, and presentation files containing many graphics.

Loop through every extracted image:

extractedImages.forEach(image=>{

    downloadImage(

    image

    );

});

Attach the click event:

downloadAllButton

.addEventListener(

"click",

downloadAllImages

);

Finally, allow users to begin another extraction:

startOverButton

.addEventListener(

"click",

resetApplication

);

After the downloads have completed, users can click Start Over to upload another PDF and repeat the extraction process without refreshing the browser.

Demo: How the PDF Image Extractor Works

Step 1: Upload Your PDF Document

The image extraction workflow begins by uploading a PDF document using either the drag-and-drop area or the file picker.

Once a document has been selected, the browser validates that the uploaded file is a PDF before reading it into memory. Since the application performs all processing locally, the uploaded document never leaves the user's computer, making the tool suitable for confidential business reports, catalogs, presentations, contracts, technical manuals, research papers, and other sensitive documents.

After the PDF has been loaded successfully, the application prepares every page for preview generation before image extraction begins.

Step 2: Preview Uploaded PDF Pages

After the upload is complete, the application renders thumbnail previews for every page inside the document.

Instead of immediately scanning the PDF for images, users first receive a visual overview of the entire document. This allows them to verify that they selected the correct PDF and quickly identify which pages contain photographs, diagrams, illustrations, charts, or other graphics.

Page previews are especially useful when working with large product catalogs, magazines, annual reports, brochures, technical documentation, educational books, and research papers containing dozens or even hundreds of pages.

This verification step helps prevent unnecessary processing and improves the overall user experience.

Step 3: Extract Embedded Images

Once the document has been verified, users click the Extract Images button to begin scanning the PDF.

The application examines every page individually, searching for embedded image objects stored inside the document. Unlike screenshots or page rendering, the extractor retrieves the original image resources whenever possible, preserving their quality and dimensions.

As each page is processed, every discovered image is grouped according to the page where it originally appeared. This organization makes it much easier to browse the extracted results later.

Depending on the size of the PDF and the number of embedded images, extraction may take a few seconds for larger documents.

Step 4: Review the Extracted Images

After extraction is complete, the browser displays every recovered image inside an organized gallery.

Instead of showing one large collection of images, the application groups the results page by page. This allows users to understand exactly where each image came from within the original document.

Every image card displays a preview together with useful information such as the page number, image dimensions, and image format. This helps users quickly identify the graphics they need before downloading anything.

For example, a brochure may contain company logos, banners, icons, and product photographs spread across several pages. Grouping images by page makes navigating these documents much easier.

Step 5: Download Individual Images or Pagewise

Each extracted image includes its own Download Image button.

This feature is useful when users only need one or two graphics from a large document. Instead of downloading every extracted image, they can save only the specific illustrations, charts, product photographs, or logos that are relevant to their work.

For example, a designer may only need a company logo, while a marketing team may only want product images from a supplier catalog. Individual downloads eliminate unnecessary files and simplify the workflow.

After clicking the download button, the browser immediately saves the selected image without requiring any additional processing.

Step 6: Download Every Image

For users who need all graphics contained inside the document, the application also provides a Download All Images from PDF button.

After extraction has finished, clicking this button automatically downloads every recovered image from every page. This saves considerable time compared to downloading each image individually.

This feature is particularly useful when processing large product catalogs, marketing brochures, presentation decks, educational books, technical manuals, magazines, supplier catalogs, or company reports containing dozens of embedded images.

Once the downloads are complete, users can click Start Over to clear the current session and upload another PDF without refreshing the page.

Step 7: Start a New Extraction

After downloading the required images, users can begin working with another PDF document.

Clicking Start Over clears the uploaded document, removes every generated preview, resets the extracted image gallery, and restores the application to its initial state.

This allows users to process multiple PDF files during the same session without reloading the browser or reopening the application.

The reset process is completed instantly, making the workflow smooth and efficient when working with many PDF documents throughout the day.

Performance Optimization Tips

Image extraction is generally faster than OCR because the application recovers existing image objects instead of recognizing characters. But large PDF documents containing hundreds of pages or high-resolution graphics can still require significant processing time.

One simple optimization is to process pages sequentially instead of attempting to analyze every page simultaneously.

for(

let page = 1;

page <= pdf.numPages;

page++

){

    await extractPageImages(page);

}

Loading only the required page into memory reduces browser memory usage and improves stability when processing large documents.

If the application supports page selection, allowing users to extract images from only specific pages can greatly reduce processing time for large catalogs or reports.

const startPage = 10;

const endPage = 25;

After images have been downloaded, release any temporary browser resources:

URL.revokeObjectURL(

imageURL

);

Finally, clear the extracted image collection before processing another PDF:

extractedImages.length = 0;

These small optimizations help the application remain responsive even when working with documents containing hundreds of embedded graphics.

Important Notes from Real-World Use

Not every PDF contains embedded images.

Some documents consist entirely of text and vector graphics, while others may contain scanned pages that appear as a single full-page image. Understanding how the original PDF was created helps set realistic expectations before extraction begins.

Always validate uploaded files before processing.

if(

file.type !== "application/pdf"

){

    alert(

    "Please upload a valid PDF."

    );

}

Some PDF creators compress embedded images heavily to reduce file size. In those situations, the extracted images will match the quality stored inside the PDF, but they can't be improved beyond the original resolution.

Users should also verify extraction results before downloading every image, particularly when processing large reports or catalogs containing hundreds of graphics.

Because the application performs all operations locally inside the browser, confidential documents remain private throughout the extraction process. This makes browser-based image extraction suitable for business reports, engineering drawings, financial documents, legal records, educational resources, and other sensitive PDFs.

Common Mistakes to Avoid

One common mistake is assuming every visible object inside a PDF is an extractable image.

Many diagrams, logos, and charts are actually vector graphics rather than raster images. These elements are rendered by drawing commands and can't always be extracted as standalone image files.

Another mistake is relying on screenshots instead of extracting embedded images.

Screenshots capture only the rendered page displayed on the screen, which often reduces image quality and includes unnecessary page elements.

Always verify that embedded images have been detected before displaying the results.

if(

extractedImages.length === 0

){

    alert(

    "No embedded images found."

    );

}

Some users also forget to organize extracted images by page.

Grouping images according to their original page location makes it much easier to navigate large documents containing dozens or hundreds of graphics.

Finally, always review the extracted images before downloading them.

Checking the preview allows users to confirm image quality, dimensions, and page location before saving the files.

Conclusion

In this tutorial, you built a browser-based PDF Image Extractor using JavaScript.

You learned how to upload PDF files, preview document pages, locate embedded image objects, extract images while preserving their original quality, organize results page by page, download individual images, and download every extracted image directly from the browser.

More importantly, you learned the difference between embedded images and rendered page previews, giving you a better understanding of how PDF documents are structured internally.

Because the entire workflow runs locally inside the browser, users can safely recover graphics from confidential PDF documents without uploading them to external servers.

You can try the complete implementation here:

PDF Image Extractor: https://allinonetools.net/extract-images-from-pdf/

Once you understand this workflow, you can extend the project further by adding duplicate image detection, automatic image compression, AI-powered image tagging, background removal, image format conversion, OCR on extracted images, watermark detection, or bulk asset management features.