Build a PDF to Image Converter in Next.js

This tutorial walks through the PDF to Images feature in a Next.js template. You'll learn how to use it from the UI, and how it works under the hood using browser-based PDF rendering and image export.

---

What This Tool Does

The PDF to Images tool converts every page of an uploaded PDF into one or more image files.

Supported output formats:

• PNG — lossless, great for diagrams and documents with sharp lines
• JPG — smaller file sizes, ideal for photographs and sharing

You can also control:

• Quality for JPG output
• DPI for rendering resolution

---

Step-by-Step User Tutorial

1. Open the PDF to Images tool

From the sidebar, select the PDF to Images tool.

2. Upload a PDF file

Use the upload area and drag or choose a PDF file.

• The tool only accepts .pdf
• You can upload one file at a time

3. Choose the output format

Select either PNG or JPG from the format dropdown.

• PNG keeps image transparency and delivers crisp results.
• JPG produces smaller files and uses white backgrounds automatically.

4. Set the quality and DPI

Adjust the sliders:

• Quality controls JPEG compression.
• DPI controls the rendering scale.

Higher DPI produces sharper images but uses more memory and takes longer.

5. Start conversion

Click the Convert to Images button.

The progress indicator updates while the pages are rendered one by one.

6. Preview converted pages

After conversion, the first page appears as a preview.

A list of all converted pages appears below, with download buttons for each image.

7. Download images

Use the Download All button to save all pages at once, or download individual images.

Each output file is named like:

• document-page-1.png
• document-page-2.jpg

---

How It Works Under the Hood

This is a Next.js implementation, where the interactive UI lives in a client component and the conversion helper lives in a shared lib module.

The feature is implemented in two main places:

• components/tools/pdf-to-images-tool.tsx
• lib/pdf-to-image-client.ts

1. Client-side app UI

pdf-to-images-tool.tsx handles:

• Uploading the PDF file
• Validating file type
• Reading settings: output format, quality, DPI
• Showing progress, preview, and download controls
• Calling the conversion helper

When the user clicks Convert to Images, the tool calls:

const images = await convertPdfToImages({ file: sourceFile, format, quality, dpi, onProgress })

2. PDF rendering with pdfjs-dist

The actual conversion happens in lib/pdf-to-image-client.ts.

This file dynamically imports pdfjs-dist and sets up the worker like this:

const pdfjs = await loadPdfJs()
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/legacy/build/pdf.worker.min.mjs', import.meta.url).toString()

Then it loads the PDF file and creates a document object:

const pdfData = await file.arrayBuffer()
const pdf = await pdfjs.getDocument({ data: pdfData }).promise

3. Rendering pages onto a canvas

The conversion loop renders each PDF page one at a time:

for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
  const page = await pdf.getPage(pageNumber)
  const viewport = page.getViewport({ scale })
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d', { alpha: format === 'png' })
  canvas.width = Math.ceil(viewport.width)
  canvas.height = Math.ceil(viewport.height)

  if (format === 'jpg') {
    context.fillStyle = '#ffffff'
    context.fillRect(0, 0, canvas.width, canvas.height)
  }

  await page.render({ canvas, canvasContext: context, viewport }).promise

  const blob = await new Promise<Blob>((resolve, reject) => {
    canvas.toBlob((result) => {
      if (!result) reject(new Error(...))
      resolve(result)
    }, mimeType, format === 'jpg' ? normalizedQuality : undefined)
  })
}

Key details:

• viewport is scaled by dpi / 72
• canvas.toBlob() converts the rendered page into PNG or JPG data
• For JPG, the code first paints a white background because JPEG does not support transparency

4. Exporting images as downloadable files

Each rendered page becomes a Blob, which is converted into a browser object URL:

function createObjectUrl(blob: Blob) {
  return URL.createObjectURL(blob)
}

That URL is stored and later used for preview and downloads.

5. Downloading files

The UI uses this helper to trigger downloads:

export function downloadObjectUrl(url: string, fileName: string) {
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

This creates a temporary anchor tag and simulates a click so the browser downloads the image.

6. Cleaning up memory

After conversion, object URLs are revoked to free browser memory:

export function revokeConvertedImages(images: ConvertedPdfImage[]) {
  images.forEach((image) => URL.revokeObjectURL(image.url))
}

This is important because every converted page creates an in-memory image blob.

---

Practical Notes

Best settings for quality and speed

• PNG is best for text, charts, and sharp document pages
• JPG is best for smaller downloads and photographic PDF content
• DPI 150 is a solid default: good sharpness without excessive memory use
• If your PDF is large, convert only what you need or split it first

Why this approach is powerful

• It runs entirely in the browser
• No server upload or backend processing is required
• Files stay private on the user’s device
• The experience is instant and responsive

---

Example Next.js Workflow

1. Open the PDF to Images tool in the app
2. Upload report.pdf
3. Choose JPG
4. Set quality to 85%
5. Use DPI 150
6. Click Convert to Images
7. Preview the first page
8. Click Download All

You now have one image file per page, ready for use in presentations, websites, or screenshots.

---

Where This Lives in the Template

• Component: components/tools/pdf-to-images-tool.tsx
• Conversion helper: lib/pdf-to-image-client.ts
• Tool entry in config: lib/tools-config.ts
• Route mapping: app/tools/[id]/page.tsx

If you want to modify the feature, those are the files to edit.

---

Support the Template

If you'd like the full Next.js template or want to support this build, grab it on Gumroad:
https://jignesh60.gumroad.com/l/file-utility-dashboard-nextjs-template

Replace that link with your own product page to make it the primary purchase location.

---

Summary

This PDF to Images feature is a great example of how a Next.js app turns browser APIs into a real product capability. It combines pdfjs-dist rendering, canvas export, and browser downloads to give you a fast, client-side PDF conversion feature without any backend.