Insert Image into PDF — Add Photos or Logos Online

You need to add a logo to a letterhead, place a scanned stamp on a contract, paste a photo into a report or a signature under the text. The "Insert Image" tool in pdfredX overlays any image onto the page right in the browser: you move, scale, rotate and skew it with sliders, then save. Nothing is uploaded to a server.

Step 01. Open the page and choose an image

Load a PDF or a photo on pdfredx.com, open the page you need in the editor (FAB) and turn on the 🖼️ "Insert" tool. A file picker opens — choose a PNG, JPG or logo. The image is read locally through FileReader, nothing goes to a server.

The picture appears in the center of the page, scaled to about 60% of the width — immediately visible and easy to move.

Step 02. Position, rotate and skew

The inserted image is an object with the usual handles: drag the corners to resize, the top handle to rotate, the middle to move. A panel #FAB_INSERT_PANEL opens at the bottom with extra controls:

• Skew sliders (skewX / skewY) — shear the image horizontally and vertically in degrees. That way a stamp or photo "lies" at the angle of the page, imitating a tilt.
• Mirror H / V — flips the picture horizontally or vertically (⇄ / ⇅).
• 🗑 Delete — removes the inserted image.
• ✓ OK — fixes it in place and clears the selection.

A transparent PNG (logo, stamp, signature) lies over the text without a white background — only the drawing itself is visible.

Step 03. Save

Press "Save" in the editor — the image is baked into the page at full resolution (via the export multiplier), and the editUrl is updated. The result shows in the gallery at once. Then "Create PDF" assembles the final file. The download goes straight from the browser. Free, no registration, no server queue.

How it works under the hood

Insertion runs through Fabric.js. fabInsertImageFromFile reads the file into a dataURL and creates a fabric.Image: the image is scaled to 60% of the canvas and centered. It becomes a full object on the canvas — the standard Fabric handles (move, scale, rotate) work with it.

The tilt is set by the object's skewX / skewY properties: the sliders call obj.set('skewX', …) and re-render the canvas. Mirroring toggles flipX / flipY. On save, saveFab bakes everything into the page image at native resolution, so the insert doesn't blur.

Known limitations

The tilt is a skew (shear), not full perspective. The sliders shear the image along the axes — enough to "tuck" a stamp under the page's tilt. But it isn't a 4-point perspective correction: parallel edges stay parallel, the "trapezoid" effect (where the far edge is narrower than the near one) is not reproduced.

The result is raster. The insert is baked into the page image; you can no longer move it as a separate layer in the finished PDF.

Editing page by page. The image is inserted on one open page at a time.

Want to place a semi-transparent mark on all pages rather than just insert? That is the Watermark tool. And to lock the document with a password — Protect PDF.

Try it right now — pdfredx.com, no registration, your files stay with you.

A contract needs to be endorsed: place the organization's scanned stamp, paste in a signature, add a logo to the letterhead. Most often this is done from a PNG with a transparent background — a stamp or signature captured in advance. The problem is that an ordinary online tool for inserting an image into a PDF asks you to upload the contract itself to its server. That is, a document with details, amounts and signatures travels to someone else's machine just to overlay a single picture. Let's look at how to do this locally and why it matters.

Why this is a sensitive operation

A stamp and a signature are exactly what give a document its weight. The contract they are placed on is almost always confidential: deal terms, personal data, banking details. Sending it in full to a third-party service's server is precisely the risk you want to avoid when it comes to signing.

Worth remembering separately: the transparent stamp file itself (a PNG facsimile) should also not be handed around on someone else's servers — it is your reusable "imprint."

Where the contract goes on server-side services

When you upload a PDF to a typical online editor for inserting a picture, the file travels in full to a remote machine. From there it follows the service's policy, which few people ever read:

• the document is stored in a contractor's temporary storage (AWS, GCP, Azure);
• it is processed on someone else's server;
• it is kept from a few hours to several days "for reliability";
• it is logged together with metadata — IP, time, file name and size.

Local overlay: the document never leaves the tab

pdfredX inserts an image without uploading either the contract or the stamp file anywhere. That is a consequence of the architecture, and you can verify it.

The files are read locally. Both the PDF page and the stamp picture open in the tab through FileReader. There is no network request carrying them.

The overlay happens in the tab's memory. Placement, rotation, tilting to the page's angle, mirroring — all of these are operations on data that is already loaded. Nothing is sent anywhere.

The finished file is built on the client. The signed document is formed right in the tab and lands in "Downloads," rather than flying to a server and back.

It works offline. Load the contract and the stamp, turn off the internet and endorse it — everything keeps working. The network is only needed to load the app once.

In practice: open the page you need, insert the PNG stamp or signature, use the skew sliders to fit it to the sheet's angle, position it and save. Both the contract and the stamp file stay with you the whole time.

What we cannot guarantee — an honest disclaimer

Client-side processing protects a document from being sent to external servers, but it is not a shield against every threat, and promising otherwise would be dishonest.

Legal weight. An overlaid stamp or signature image is a visual imprint, not a qualified electronic signature (QES). For legally binding signing, use certified e-signature tools; inserting an image is convenient for internal, working and approval documents.

Malware or a keylogger on the device. If the machine is compromised, a program can read files off the disk bypassing the browser entirely.

Browser extensions with broad permissions. An extension with "read data on all sites" access can, in theory, see the tab's contents. For sensitive documents, work in a profile without third-party extensions or in a private window.

The saved file stays on your disk. If the device is not protected by encryption, files can be read by third parties with physical access.

We provide isolation at the level of the browser tab. The rest is on the user's side.

Overlay a stamp or signature without uploading the contract to a server — pdfredx.com, free, no registration.

There are different ways to "lay" a picture onto a PDF page at an angle. Full perspective is a projective transformation (a homography, a 3×3 matrix) that reproduces a trapezoid: the far edge of the object appears narrower than the near one. A simpler and more predictable path is affine skew (shear): a tilt along the axes without depth distortion. pdfredX takes the second path. Let's break down how the image-insertion tool (insert) in the FAB editor is built: why fabric.Image with skewX/skewY, how skew differs from true perspective, and how the result is baked into the page.

The architectural choice: affine skew vs. a projective homography

True perspective (a homography). A projective transformation is defined by a 3×3 matrix and requires dividing by a homogeneous coordinate — that's how a tilted plane is rendered in 3D (CSS matrix3d, WebGL). It gives the trapezoid effect but is harder to implement and to control in the UI (you need 4 corner points).

Affine skew (the pdfredX path). Fabric.js provides skewX / skewY — a shear along the axes. This is an affine transformation: parallel edges stay parallel, there's no trapezoid, but the object convincingly "tilts" to the page's angle. The upsides are predictability, simple control with two sliders and the standard Fabric handles, and all of it on top of the editor's already-raster pipeline. For the typical task (tucking a stamp/photo under a sheet's tilt) skew is enough.

The implementation, piece by piece

Loading and placement

function fabInsertImageFromFile(file) {
  const reader = new FileReader();
  reader.onload = ev => {
    fabric.Image.fromURL(ev.target.result, img => {
      const scale = Math.min(maxW / img.width, maxH / img.height, 1); // up to 60% of the canvas
      img.set({ left: posX, top: posY, scaleX: scale, scaleY: scale, selectable: true });
      img.isInserted = true;
      fabPushUndo();
      fabCanvas.add(img);
      fabCanvas.setActiveObject(img);
      fabShowInsertPanel(img);
    });
  };
  reader.readAsDataURL(file);
}

The image is read locally into a dataURL and becomes an ordinary fabric.Image object — centered, scaled to 60% of the canvas. The isInserted flag marks it as an insert. From there the standard Fabric controls work: moving, scaling by the corners, rotating by the top handle.

The tilt: skewX / skewY

The #FAB_INSERT_PANEL panel gives two sliders, each setting the object's skew property:

function fabSetSkewX(val) {
  const obj = fabCanvas.getActiveObject();
  obj.set('skewX', val);   // affine shear along X (in degrees)
  fabCanvas.renderAll();
}
// fabSetSkewY — likewise for the Y axis

This is exactly where the boundary of the approach lies: skewX/skewY is a shear, not a projection. It tilts the rectangle into a parallelogram, but not into a trapezoid. For "tucking under an angle" that's enough; for correcting true perspective (straightening a sheet photographed at an angle) it isn't.

Mirroring, deletion, fixing

function fabInsertFlip(axis) {
  const obj = fabCanvas.getActiveObject();
  obj.set(axis === 'x' ? 'flipX' : 'flipY', !obj[axis === 'x' ? 'flipX' : 'flipY']);
  fabCanvas.renderAll(); fabPushUndo();
}

Mirroring toggles flipX/flipY, "Delete" removes the object from the canvas, "OK" (fabInsertClose) fixes it and clears the selection. Every destructive action goes through fabPushUndo(), so the insert can be undone (Ctrl+Z).

Baking into the page

On save, saveFab exports the canvas to an image with a native-resolution multiplier:

const multiplier = fabNativeW / fabCanvas.getWidth();
const dataUrl = fabCanvas.toDataURL({ format:'jpeg', quality:0.92, multiplier });
items[fabItemId].editUrl = dataUrl;

The inserted image fuses with the page into a single raster at full resolution, so it doesn't blur on export. As with the other tools, origUrl is not mutated — edits go only into editUrl.

Trade-offs and the limits of the approach

Skew ≠ perspective. There is no trapezoid effect; you can't straighten a badly tilted frame or lay a texture strictly onto 4 corners with this tool.

A raster result. After saving, the insert is part of the page image; you can no longer move it as a separate layer (for that, reopen the FAB before applying Cropper).

One page at a time. The tool works with the page open in the editor.

What's next

True 4-point perspective — a projective warp via matrix3d/WebGL with draggable corner handles, to straighten sheets photographed at an angle and lay a texture exactly onto the corners.

A stamp library — save frequently used PNGs (stamp, signature) for quick re-insertion without picking a file.

Want to test it — open a page in the editor on pdfredx.com, insert a PNG and play with the skew sliders. No registration, no file upload to a server.