PDF files are widely used for sharing documents because they preserve formatting across different devices. Many PDFs contain valuable images such as logos, product photos, charts, diagrams, illustrations, and marketing graphics.
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
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:
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:
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.
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.
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}
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.
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.
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.
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.
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.
