DEV Community: Madhushan Sanjeewa

Effortless PNG to PDF Conversion Guide

Madhushan Sanjeewa — Fri, 02 Oct 2026 19:51:52 +0000

How to convert png to pdf

Turn a PNG into a clean, shareable PDF without starting over. This guide shows how to convert png to pdf with a PNG to PDF tool. Upload your image, set the page order if you have more than one file, and download a PDF that is easier to send, print, store, or submit online.

What is the easiest way to convert a PNG to PDF?

The easiest way to convert PNG files is to use an online image to PDF converter. You do not need design software or extra layout work.

Select your PNG file, confirm the page order, and create the PDF in a few steps. This is useful when a form, client, school portal, or office system asks for a PDF instead of an image file.

Use it when you need to:

Convert one screenshot into a file that is easier to email or upload.
Combine multiple PNG images into one PDF for receipts, scans, notes, or visuals.
Prepare files for printing so each image fits inside a PDF page.
Keep image content together instead of sending several separate attachments.
Create a clean handoff when a recipient wants a document, not loose images.

Simple PNG to PDF steps

A good PNG to PDF workflow should be quick, clear, and easy to follow. You only need the PNG file or files you want to turn into a PDF.

Upload your PNG file. Choose the image from your device, cloud folder, or downloads.
Add more images if needed. If you want one PDF with multiple pages, upload each PNG before you convert.
Review the order. Put the images in the order you want them to appear in the final file.
Convert images to PDF. Start the conversion and let the tool create the document.
Download and share. Save the PDF, then email it, upload it, or store it with related files.

Convert PNG files online from everyday devices

If you are searching for how to convert a png to pdf online, the main benefit is ease. You can work in a browser instead of installing a separate app. That helps on a shared computer, on a new device, or for a one-time job.

If you are wondering how to convert png to pdf on iPhone, the steps are usually the same. Open the tool in your mobile browser, choose the image from Photos or Files, convert it, and save the PDF back to your device.

On a Mac, you may also have built-in ways to save images as PDFs. An online converter is still useful when you want the same steps on each device. If your task is the reverse, such as how to convert pdf to png mac, look for a PDF to image option rather than a PNG to PDF setting.

Built for quick document-ready results

A PNG file is great for screenshots, graphics, and saved images. A PDF is often better when the file needs to act like a document. Converting fills that gap without redesigning anything.

Use the PNG to PDF tool when you want a file that is:

Easier to submit through document upload forms
More organized than multiple separate image attachments
Better suited for printing or sharing as a record
Useful for invoices, IDs, forms, sketches, screenshots, and notes
Simple to store alongside other PDFs

Start with your PNG file

Choose the image you want to turn into a PDF. You can convert png file to pdf in a few clear steps. Upload your PNG, check the order, create the PDF, and download a file that is ready to send, save, or print.

Smart Tax Planning: The Complete GST Calculator Guide for 2026

Madhushan Sanjeewa — Fri, 02 Oct 2026 16:06:57 +0000

Understanding the Purpose of a Modern GST Calculator

A gst calculator is a helpful digital tool. It computes goods and services tax amounts instantly. Modern entrepreneurs rely on this tool daily. You enter your basic product price first. Next, you select the correct tax rate. The software produces the final cost immediately. Clear calculations prevent costly accounting mistakes. Beginners understand this simple process with ease. Manual math often causes unwanted stress. This device resolves confusing formulas within seconds. It breaks down central and state tax shares. Buyers see exact prices before making payments. Sellers display transparent rates on every invoice. Digital tools keep trade simple and organized. You gain total control over your funds. Every small shop benefits from swift calculations. The system handles standard percentages effortlessly. Accuracy builds trust between sellers and buyers. Clear pricing creates happy returning customers. Fast math supports smooth store operations. Workers enjoy reliable answers at any hour. Digital accounting keeps your daily records clean. Tax computation becomes a pleasant task today. You save valuable energy for sales growth. A reliable gst calculator guides your first steps. Smart users welcome this dependable help. Financial success begins with clear numbers. Simple technology powers your enterprise forward. Precise data keeps your business compliant always. New merchants learn the basics quickly. Honest figures give you complete peace. Confidence grows with every correct entry.

Essential Advantages for Daily Commercial Transactions

Fast billing delights every busy store shopper. Cashiers prepare accurate bills in moments. You boost team productivity across the company. An online gst calculator accelerates routine checkout lines. Clerks verify wholesale charges without delay. Rapid math protects valuable working hours. Teams finish invoices during peak morning rush. Perfect calculations safeguard your profit margins. Managers review daily sales receipts with confidence. Smooth transactions build long customer loyalty. Fast tools support expanding retail shops. Online merchants also process cart sums easily. Digital accuracy removes human calculation blunders. Bookkeepers balance ledgers before the evening ends. You track incoming cash flows with clarity. Organized receipts satisfy all banking needs. Automated tax counts simplify seasonal bulk orders. Employees master the software during their first shift. Simple interfaces minimize costly onboarding seminars. Office staff focus on exceptional customer care. Quick results keep daily logistics running smoothly. Good speed creates higher customer satisfaction. A modern gst calculator empowers small businesses. Your workforce stays motivated and highly productive. Clear receipts encourage repeat purchases. Reliable figures strengthen vendor partnerships. Every invoice matches exact official tax guidelines. Swift billing creates an enjoyable buying journey. You save precious resources each working day. Strong productivity drives commercial expansion. Smart automation makes business life pleasant. Success follows steady operational precision.

Exploring Inclusive and Exclusive Tax Price Methods

Products carry either inclusive or exclusive tax values. Exclusive tax means you add tax on top. The base price remains separate from the levy. Meanwhile, inclusive rates wrap taxes inside the total. Retail tags often show inclusive sticker prices. Wholesale suppliers prefer exclusive price quotations. Discerning owners distinguish both models clearly. A flexible gst calculator switches modes instantly. You toggle between options with one tap. Inclusive math reveals original net merchandise values. Exclusive math displays the exact surcharge amount. Both methods serve vital retail purposes. Knowing the difference protects your revenue targets. Clear pricing avoids confusion at payment counters. Clients appreciate honest, itemized breakdowns. Quoting correct tax structures secures client goodwill. Manufacturers rely on net figures for materials. Retailers focus on final shelf totals. The system computes both equations flawlessly. You discover true costs behind every supply invoice. Clean separation helps your tax filing later. Understanding these calculations keeps bookkeeping simple. Proper categories keep profit plans realistic. Your catalog remains accurate and well structured. Smart pricing choices attract serious consumers. Transparent values remove customer hesitation. Every commercial quote stays completely clear. Sound math ensures lasting financial integrity. You handle diverse product catalogs smoothly. Both calculation modes deliver perfect numbers. A versatile gst calculator resolves every pricing dilemma. Precise figures sustain healthy company margins.

Choosing the Best Digital Features for Current Needs

Select tools that offer responsive mobile layouts. Modern business owners work on smartphones constantly. Look for software featuring modern 2026 tax slabs. Current rates include five, twelve, and eighteen percent. Twenty-eight percent applies to luxury goods. An effective gst calculator updates these percentages automatically. Offline access allows remote trade calculations anywhere. Simple buttons ensure swift numerical inputs. Clean screens prevent accidental typos during entry. Fast loading speeds save precious minutes. Cloud backup features safeguard previous estimates. You export neat summaries into spreadsheet files. Intuitive designs welcome beginner users warmly. Reliable web tools require zero complex installation. You open browser tabs and calculate immediately. High security shields your confidential fiscal metrics. Look for multi-currency support during global imports. Audio feedback confirms button taps accurately. Quality utilities offer simple print options. Instant sharing options streamline coworker discussions. Smooth navigation speeds up your workflow. Choose platforms with zero confusing ads. Premium calculators deliver uninterrupted service daily. Your team gains steady operational support. Dependable software remains an invaluable corporate asset. Pick an interface that matches your pace. Elegant design brings joy to daily math. Modern utilities solve accounting puzzles easily. You create professional estimates in seconds. Every update keeps your system modern. A great gst calculator makes calculations truly effortless. Intelligent features uplift your commercial performance.

Long-Term Financial Growth and Audit Compliance

Consistent compliance creates a solid business foundation. Accurate ledgers keep tax authorities satisfied. You prepare seasonal tax returns with tranquility. Clean records make corporate audits painless. Investors respect companies with transparent accounts. Bankers approve credit requests much faster. Precise filings protect your hard-earned profits. Using a gst calculator ensures dependable monthly totals. Orderly financial documentation unlocks lucrative expansion loans. You forecast future budgets with clarity. Proper tax handling prevents surprise penalty fees. Your company reputation flourishes across the market. Partners appreciate your ethical business standards. Clear cash records support strategic reinvestment. You allocate funds toward product innovation. Growing enterprises maintain flawless fiscal integrity. Daily attention to detail yields massive rewards. Sound accounting principles guard your capital. You navigate economic shifts with steady poise. Proper tracking keeps every ledger balanced. Peace of mind empowers visionary leadership. Smart founders master their revenue streams early. Your organization moves toward prosperous milestones. Steady accuracy eliminates unnecessary business anxiety. Every correct computation builds financial strength. Systematic methods guide your journey forward. True success thrives on disciplined management. Regular accuracy keeps your balance sheets tidy. You achieve genuine commercial sustainability. An advanced gst calculator guarantees lasting fiscal clarity. Confident leadership inspires entire teams daily. Bright futures belong to prepared organizations.

Fit vs Fill in image-to-PDF tools: the geometry behind cropped pages

Madhushan Sanjeewa — Fri, 02 Oct 2026 14:57:43 +0000

An image-to-PDF converter can preserve an image's aspect ratio and still produce a surprising result: the page looks full, but text near the edges has disappeared.

That is not necessarily an encoding bug. It can be the expected result of Fill, combined with a clipping rectangle.

In my previous article, I covered memory ownership and browser-side processing. This article focuses on a different boundary: translating image dimensions into a predictable PDF layout.

The examples are based on the page-layout approach used in PixToPaper, an image-to-PDF tool I maintain. The small JavaScript functions below are adaptations, not the complete converter. The worked numbers were checked against its layout implementation; they are calculations, not a printer benchmark.

1. Separate image pixels from page dimensions

There are at least three rectangles to think about:

The source image: its pixel dimensions after crop and rotation.
The page: its dimensions in PDF user-space units.
The content box: the part of the page inside the chosen margins.

For the ordinary, unrotated pages created here, PDF units are points, with 72 points per inch.

A US Letter portrait page is therefore:

8.5 inches × 72 = 612 points wide
11 inches  × 72 = 792 points high

Choose half-inch margins, which are 12.7 mm or 36 points on each side:

Content width  = 612 - 2 × 36 = 540 points
Content height = 792 - 2 × 36 = 720 points
Content origin = (36, 36), measured from the top-left

Now place a 1000 × 1000 pixel image inside that 540 × 720 point box.

The image's pixel dimensions do not become its PDF dimensions automatically. They determine its aspect ratio; the placement calculation determines its physical size on the page.

2. Fit and Fill differ by one operator

For a source of width w and height h, and a content box of width cw and height ch, calculate two possible scale factors:

Horizontal scale = cw / w
Vertical scale   = ch / h

Fit takes the smaller scale. Both image dimensions stay within the content box, so the entire image remains visible.

Fill takes the larger scale. Both content-box dimensions are covered, but part of the image can extend beyond that box.

Here is a geometry-only helper. Its callers must supply positive, finite image and box dimensions, finite box coordinates, and a validated mode of "fit" or "fill". File validation and image decoding belong outside this function.

function placeImage(width, height, box, mode) {
  const scale = mode === 'fill'
    ? Math.max(box.width / width, box.height / height)
    : Math.min(box.width / width, box.height / height);

  const imageWidth = width * scale;
  const imageHeight = height * scale;

  return {
    x: box.x + (box.width - imageWidth) / 2,
    y: box.y + (box.height - imageHeight) / 2,
    width: imageWidth,
    height: imageHeight,
  };
}

This function uses top-origin coordinates and centers the image inside the box. The same scale applies to both dimensions, preserving the aspect ratio.

Run the square-image example:

const box = { x: 36, y: 36, width: 540, height: 720 };

const fit = placeImage(1000, 1000, box, 'fit');
const fill = placeImage(1000, 1000, box, 'fill');

console.table({ fit, fill });

The resulting placement is:

Placement	Scale	Drawn width	Drawn height	Left position	Top position
Fit	0.54	540 pt	540 pt	36 pt	126 pt
Fill	0.72	720 pt	720 pt	-54 pt	36 pt

With Fit, the 720-point-high content box has 180 points of spare vertical space: 90 above and 90 below the image.

With Fill, the image extends beyond the content box by 90 points on each horizontal side. Its negative left position is valid geometry, not an error to repair by forcing x to zero.

The visible horizontal fraction is:

540 / 720 = 0.75

So, with centered clipping, 75% of the source width is visible. For this 1000-pixel-wide source, that corresponds to excluding 125 source pixels on the left and 125 on the right.

Both modes preserve the aspect ratio. Only Fit promises to keep every edge visible.

An illustration from the converter's guide assets. It demonstrates the edge-clipping behavior; it is not a screenshot of the exact numeric setup above.

3. Scaling is not the same as clipping

Calculating the Fill rectangle is only half the job.

If the renderer draws the oversized image without a content-box clip, the image can cover the margins. The page boundary may hide some overflow, but it does not enforce your inner margin boundary.

In this example, the content box starts at x = 36. The Fill image starts at x = -54. Without clipping, the image covers the left margin between x = 0 and x = 36.

A renderer needs to:

Save its graphics state.
Establish a clip matching the content box.
Draw the image using the calculated placement.
Restore the previous graphics state.

For an unrotated pdf-lib page and an already embedded PDFImage, the drawing adapter can look like this:

import {
  clip,
  endPath,
  popGraphicsState,
  pushGraphicsState,
  rectangle,
} from 'pdf-lib';

function drawPlacedImage(page, image, box, placement) {
  const pageHeight = page.getHeight();
  const bottomY = (top, height) => pageHeight - top - height;

  page.pushOperators(
    pushGraphicsState(),
    rectangle(
      box.x,
      bottomY(box.y, box.height),
      box.width,
      box.height,
    ),
    clip(),
    endPath(),
  );

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

  page.pushOperators(popGraphicsState());
}

endPath() ends the path after establishing the clip; this rectangle is not being drawn as a visible border. Restoring the graphics state prevents the clip from accidentally affecting subsequent labels or other page content.

This is a drawing adapter, not a complete export routine: image decoding, embedding, page creation, and document serialization still happen elsewhere.

4. Centered layouts can hide a coordinate bug

Canvas-style layout code often measures y downward from the top. In the ordinary PDF coordinate system used here, drawing positions are measured upward from the bottom.

For an axis-aligned rectangle, convert its top position using:

PDF bottom position = page height - top position - rectangle height

For a 792-point-high page, a rectangle starting 72 points below the top and measuring 180 points high needs:

792 - 72 - 180 = 540 points from the bottom

Subtracting only the top position gives 720, which places the rectangle incorrectly.

There is a subtle testing trap: for a vertically centered rectangle, its top-origin and bottom-origin positions are equal. In our Fit example:

792 - 126 - 540 = 126

A drawing implementation that accidentally reuses the top-origin y can therefore look correct for every centered example you try.

If you are checking a coordinate adapter, include at least one non-centered rectangle. Centered-only examples cannot expose that particular mistake.

The adapter above assumes no additional page rotation or custom transformation matrix. If you introduce those, review the transform rather than applying this formula blindly.

5. Use edited dimensions before choosing orientation

The source file's original dimensions are not always the dimensions that matter for placement.

A 1200 × 800 image rotated by 90 degrees has an edited aspect ratio of 800 × 1200. If automatic orientation still uses the original dimensions, it can choose a landscape page for a portrait result.

Cropping can change the aspect ratio too. A wide photograph can become a tall crop.

A predictable sequence is:

Crop dimensions
  → swap width and height for a 90° or 270° rotation
  → choose page orientation
  → calculate margins and content box
  → calculate Fit or Fill placement

Horizontal and vertical flips do not change the dimensions.

Margin handling also needs an explicit policy. A margin of half the page width would leave no usable content width. PixToPaper bounds its effective margin so the shorter content dimension remains at least one point; rejecting an impossible margin is another possible product choice.

The important part is to make that decision before dividing by image or content dimensions, and to use the same effective margin in preview and export.

6. A visual crop is not redaction

There is a security-relevant distinction between these operations:

Cropping the raster before embedding: creates an image containing only the retained pixel region.
Clipping an embedded image while drawing: controls which part is visible on the page.

The second operation does not remove the hidden pixels from the embedded image. If the full rendered image is embedded and then clipped, the PDF can still contain image data outside the visible rectangle.

That is how the Fill drawing path discussed here works. It embeds the rendered image and clips the drawing to the content box.

Do not use Fill as a way to remove sensitive information from the resulting document. For sensitive pixels, remove or replace them in the raster before embedding, and inspect the actual exported document. A clean-looking page preview is not evidence that hidden data is absent.

7. Layout correctness does not guarantee print sharpness

A 1000 × 1000 image placed at 540 × 540 points occupies 7.5 × 7.5 inches.

Its nominal effective resolution, if those 1000 pixels are retained in the embedded raster, is:

1000 pixels / 7.5 inches ≈ 133 pixels per inch

The page geometry can be completely correct while the source lacks enough detail for the intended print size.

Increasing JPEG quality does not create more source pixels. Resizing during export can reduce the embedded pixel count further. Likewise, a layout preview rendered at a different resolution does not reproduce the finished PDF's compression.

Keep these concerns separate:

Placement: where the image sits and which edges are visible.
Sampling and encoding: how much image detail the export retains.
Printing: whether the PDF reader or printer applies another scaling step.

For a practical companion to the geometry, I also wrote a guide to printing images at the correct size.

The takeaway

Fit and Fill are not quality settings. They are different placement contracts:

Fit: preserve the whole image inside the content box.
Fill: cover the content box and clip whatever extends beyond it.

A maintainable implementation keeps the page geometry independent of the rendering backend, converts coordinate systems explicitly, and clips against the content box rather than relying on page boundaries.

The useful checks are concrete: verify a known page and margin size, inspect an image with labeled edges, try a non-centered rectangle, rotate a non-square image, and distinguish visible clipping from actual pixel removal.

Those checks explain more than simply asking whether the PDF looks full.

References

Browser-only image-to-PDF conversion: memory, privacy, and rendering trade-offs

Madhushan Sanjeewa — Thu, 01 Oct 2026 13:35:44 +0000

This article examines the design and limitations of a browser-side image-to-PDF implementation, not an independent product benchmark. The code blocks are focused excerpts or adaptations, not a complete converter.

A browser-only image-to-PDF pipeline sounds straightforward: read a file, draw it on a canvas, and embed the result in a PDF.

The harder part is deciding what stays in memory, when resources become obsolete, and what “local processing” actually promises.

This walkthrough covers a TypeScript implementation using browser image APIs, Canvas, and pdf-lib. It does not use an image-upload endpoint or a server-side conversion service. Its export path runs on the browser's main thread; it does not currently use a Web Worker.

The implementation discussed here is used in PixToPaper, an image-to-PDF tool I maintain.

1. Start with resource ownership, not the download button

The processing path is:

Selected File
  -> inspect format and dimensions
  -> decode briefly to create a small thumbnail
  -> keep File, object URLs, and edit metadata
  -> decode again when rendering is needed
  -> render one image into a bounded canvas
  -> encode PNG or JPEG
  -> embed in the in-memory PDF
  -> create a Blob URL for download

The application state retains each selected File, a source object URL, a thumbnail object URL, dimensions, and crop/rotation/flip metadata. It does not retain a full-resolution decoded bitmap for every image.

That is a deliberate trade-off: re-decoding costs work, but keeping all full-resolution decoded images alive can make a multi-image session expensive before export even starts.

A thumbnail is useful for navigation, not evidence of final export quality. The implementation creates thumbnails with a longest edge of 320 pixels and renders the source again for export.

2. A small compressed file can become a large allocation

File size is not a reliable proxy for decoded memory.

For one four-channel, eight-bit-per-channel image surface, the arithmetic is:

6000 x 4000 pixels x 4 bytes = 96,000,000 bytes
                             approximately 91.6 MiB

That is only one surface. Browser decoding, canvases, encoded blobs, PDF-library structures, and final serialization can overlap. This calculation is not a measurement of total process memory.

The implementation checks three different budgets:

Budget	Implementation limit	What it constrains
Individual input file	50 MiB	Compressed file bytes
Source image	40 million pixels	Accepted source dimensions
Session	100 images and 250 MiB of input	Accepted batch size
Rendered canvas	16 million pixels and 8192 pixels per edge	Export render dimensions

These are application limits, not universal safe browser limits. A low-memory device can still fail below them. In particular, a render cap does not prevent the decoder from allocating the larger accepted source image first.

Before decoding, the importer inspects up to the first 1 MiB of the file to identify PNG, JPEG, or WebP dimensions. It also checks the extension and declared MIME type against the detected format. After decoding, it checks the actual dimensions again.

This header check is a guardrail, not a replacement for browser decoding or a complete security audit. Files with unusually large metadata can be rejected even when another application would open them. The error message recommends saving a fresh supported image rather than silently accepting an uncertain input.

3. Bound both the longest edge and total pixel count

A longest-edge limit alone is not enough. An 8192 by 8192 canvas contains more than 67 million pixels.

The sizing function applies three constraints: do not upscale, respect the edge limit, and respect the total pixel budget.

This JavaScript adaptation expects positive, finite image dimensions and a positive, finite maxEdge, supplied by the validated rendering path:

const MAX_RENDER_PIXELS = 16_000_000;
const MAX_RENDER_EDGE = 8192;

function canvasSize(width, height, maxEdge) {
  const scale = Math.min(
    1,
    Math.min(maxEdge, MAX_RENDER_EDGE) / Math.max(width, height),
    Math.sqrt(MAX_RENDER_PIXELS / (width * height)),
  );

  return {
    width: Math.max(1, Math.floor(width * scale)),
    height: Math.max(1, Math.floor(height * scale)),
  };
}

For a 6000 by 4000 image with maxEdge set to 8192, the result is 4898 by 3265. The pixel budget wins even though neither original edge exceeds 8192.

With a 1600-pixel edge cap, the result is 1600 by 1066. A 300 by 200 image remains 300 by 200: selecting a higher-quality export does not invent source detail.

The resulting 16-million-pixel ceiling represents about 61 MiB for one RGBA surface. Again, it is not a ceiling on total application memory.

4. “Lossless” and “original file” are different contracts

In this implementation, the higher-fidelity export encodes the rendered canvas as PNG. The smaller alternatives encode JPEG with different quality values and edge caps:

Export mode	Encoding	Longest-edge cap	JPEG quality argument
Lossless	PNG	8192	Not applicable
High	JPEG	3200	0.92
Compact	JPEG	1600	0.75

Every mode also respects the 16-million-pixel render budget. JPEG quality arguments are encoder inputs, not guarantees of a specific file size or identical results across browsers.

PNG encoding avoids an additional lossy JPEG step. It does not bypass resizing, crop transforms, or the chosen background. The renderer paints white before drawing, so transparent source areas become white in the output. Animated input is handled as a still image, not as a multipage animation export.

The user-facing promise needs to match those facts. “Lossless rendered-image encoding” is more precise than “your original file is preserved unchanged.”

5. Process pages sequentially, but acknowledge retained PDF data

Rendering every selected image with Promise.all can keep several decoded images and canvases alive at once.

The export loop instead renders, encodes, and embeds one image at a time. After encoding, it clears the canvas dimensions before embedding. A finally block clears the canvas again on error paths. The rendering helper closes its decoded image before returning the canvas to the exporter.

The PDF library still retains document data as pages accumulate. Sequential rendering reduces overlapping render resources; it does not make the entire export constant-memory or stream the PDF directly to disk. Saving the document can require additional memory for the final byte array and Blob.

Between pages, the implementation yields with:

await new Promise((resolve) => setTimeout(resolve, 0));

That gives the event loop an opportunity to process other work. It does not move decoding, PNG embedding, or PDF serialization off the main thread. One expensive operation can still cause a noticeable pause.

A Worker could be a separate improvement, but this article does not claim one exists. Browser-side execution and background-thread execution are different architectural decisions.

6. Share page geometry, not every rendering step

Preview and export need to agree on orientation, margins, image placement, and clipping.

A pure layoutPage function computes page dimensions and the image rectangle from the edited image dimensions and PDF settings. Both the canvas preview and PDF exporter consume that layout.

For a zero-margin US Letter landscape page, the page dimensions are 792 by 612 PDF points. A 1200 by 800 image fitted into that page occupies 792 by 528 points, centered vertically. The image's rectangle is the same if the source has 300 by 200 pixels; its available detail is not.

The preview uses top-origin coordinates. PDF drawing uses bottom-origin coordinates, so the exporter converts the vertical position:

const pdfY = layout.pageHeight - layout.imageY - layout.imageHeight;

The exporter also clips drawing to the content rectangle. Otherwise, a “Fill” image that exceeds that rectangle can draw into margins instead of being cropped to the intended printable area.

Sharing geometry does not make the preview a pixel-perfect PDF proof. The preview uses its own render resolution; it does not decode the finished PDF or reproduce its JPEG compression. It is a layout preview. Final quality must be checked in the actual downloaded file.

7. Coalesce previews instead of racing them

Rapid changes can create stale work: page A starts rendering, the user selects page B, and A finishes last.

The preview controller uses two pieces of state:

A revision counter that changes for each request.
A flag allowing only one active render.

Every request updates the desired page and increments the revision. If a render is already running, the controller returns rather than launching another. When that render finishes, it checks whether its revision is still current before copying pixels onto the visible canvas.

If the revision changed, it discards that result and starts a render for the latest requested state. Closing the dialog also increments the revision and clears the visible preview canvas.

This coalesces intermediate requests. It does not cancel an image decode already in progress. That distinction matters when describing responsiveness and resource use.

8. Treat object URLs as owned resources

An object URL is a handle to a Blob or File, not an upload destination.

The implementation creates URLs for source files, thumbnails, and generated PDFs. It releases them at the corresponding lifecycle boundary:

Remove an image: revoke source and thumbnail URLs.
Replace a thumbnail after editing: revoke the old thumbnail URL.
Change image order, edits, or PDF settings: invalidate and revoke obsolete PDF download URLs.
Clear the session: release image resources and invalidate downloads.

The focused image-cleanup excerpt is:

function disposeImage(item) {
  URL.revokeObjectURL(item.sourceUrl);
  URL.revokeObjectURL(item.thumbnailUrl);
}

Do not revoke a download URL immediately after displaying a link the user may click later. Its lifetime should match the availability of that result.

The page lifecycle has another wrinkle: a page entering the browser's back/forward cache may return with its active session. The implementation avoids clearing that session on a persisted pagehide event. This also means “leaving the page” does not always mean its in-memory resources disappear immediately.

9. Lazy-load the expensive path

The PDF module is imported inside the conversion handler:

const { generatePDF } = await import('./pdf');

The editor is also imported on first use rather than on initial navigation. That keeps those paths out of the initial eager dependency graph, subject to the bundler's output and loading behavior.

Lazy loading changes when code is fetched. It does not reduce the eventual cost of conversion, eliminate initialization failures, or prove a particular performance score. The UI still needs a loading state, an error path, and protection against duplicate conversion requests.

10. Define privacy at the file-processing boundary

“Selected images are processed locally” is a testable implementation claim. “Nothing ever leaves your browser” is a much broader statement and may be false for an otherwise browser-only converter.

A page can still request HTML, scripts, fonts, or optional analytics. A responsible review separates ordinary website traffic from transmission of selected file contents, filenames, or generated PDF bytes.

When checking a file-processing workflow, use a non-sensitive sample and inspect the entire sequence: import, edit, preview, generate, download, and clear. Check request URLs, query parameters, bodies, and telemetry payloads rather than looking only for a multipart upload.

This article describes source-level design and reproducible calculations. It is not an exhaustive network-security audit, a measured heap benchmark, or a guarantee that every browser can process every accepted batch.

The takeaway

The PDF download is the end of the pipeline, not the center of the design.

A maintainable browser-side converter needs explicit answers to four questions:

What is retained? Keep file references and edit metadata; decide deliberately whether to retain decoded pixels.
What is bounded? Input bytes, source dimensions, render dimensions, and batch size are separate budgets.
What becomes obsolete? Preview results, thumbnails, and downloads need defined invalidation and cleanup rules.
What is promised? Local processing, lossless encoding, responsive UI, and memory safety are different claims.

Those distinctions make the design easier to explain and make failures easier to diagnose without hiding the trade-offs.