Add Signature or Photo on Image

Place a signature, logo, stamp, or photo on a document or image โ€” drag, resize, rotate, crop, and remove backgrounds, then export at full resolution. Nothing ever leaves your browser.

What is the Signature & Photo Overlay Tool?

This tool places a signature, logo, stamp, or photo on top of another image or document page, with full control over where it sits, how big it is, and how it's rotated โ€” the same basic job as "sign and send" in a PDF viewer, but for any image and with no account or software install. Upload a document photo, screenshot, or scanned page as the base, drop a signature or logo on top, and drag it exactly where it belongs before downloading the finished picture.

A base image can also be a PDF โ€” the first page (or any page you choose) is rendered to an image automatically, so a one-page contract or form saved as a PDF works just as well as a plain photo. Overlays aren't limited to uploaded files either: a built-in signature pad lets you draw directly with a mouse or a finger, in black or blue ink, as an alternative to scanning a real signature.

Everything โ€” reading the files, rendering the PDF page, drawing on the canvas, removing a white background from a logo, and building the final picture โ€” runs locally using Canvas, Konva, pdf.js, and pdf-lib. Nothing is ever uploaded to a server, so this works the same for a private contract as it does for a casual meme.

How to use it

  1. Upload a base image or PDF โ€” the document, photo, or page you want to put a signature or photo on.
  2. If it's a multi-page PDF, pick the page to use; it's rendered to an image automatically.
  3. Add one or more overlays: insert an image (signature/logo/photo file), draw a signature by hand with the signature pad, or add a text layer with its own color and size.
  4. Select an overlay to drag it into place, resize it with the corner handles, and rotate it with the top handle โ€” or use a quick-place button like "Bottom right" or "Center".
  5. Fine-tune with opacity, cropping, background removal, and layer order (bring forward/send back), then download as PNG, JPG, or PDF (if the base was a PDF).

How it works, and why it's private

The editor is built on Konva, a canvas library that gives each overlay its own draggable, resizable, rotatable shape with a selection outline (a "Transformer") โ€” the same interaction model used in design tools like Figma or Canva, just scoped to one base image. Dragging near the base image's center or edges snaps the overlay into alignment automatically, within a few pixels, so lining a signature up with a signature line or corner doesn't require a steady hand.

What you see on screen is a scaled-down preview โ€” a document that's really 3000 pixels wide might only display at 800 pixels so it fits your screen. When you download, the tool doesn't export a screenshot of that preview; it re-draws the base image and every overlay from scratch onto a hidden canvas sized to the ORIGINAL image's full resolution, scaling each overlay's position, size, and rotation up proportionally first. That's what keeps a downloaded signed document print-quality instead of looking like a screenshot.

A PDF base page is rendered once, early on, into a high-resolution image (roughly 2x the PDF's own point size) using pdf.js, Mozilla's PDF rendering engine running entirely in the browser via WebAssembly โ€” no page is ever sent anywhere to be converted. "Download as PDF" reverses that: the finished flattened image is embedded onto a new PDF page sized to match, using pdf-lib. Removing a background from a logo or signature uses the same fast pixel-brightness threshold as the standalone Background Remover tool โ€” nothing AI-based, just canvas pixel math, so it's instant.

Example

Signing a scanned rental agreement, 1-page PDF:

Upload agreement.pdf โ†’ rendered to a full-resolution image automatically (single page, so no page picker needed)
Draw a signature in blue ink on the signature pad โ†’ added as a new overlay, centered
Drag it onto the signature line, use "Remove background" to drop the white canvas behind the ink โ†’ drag the rotate handle a few degrees to match the line's angle
Download as PDF โ†’ a new one-page PDF with the signature baked in at full print resolution

Frequently asked questions

Is my document or signature uploaded anywhere?

No. The base image or PDF, every overlay, and the final signed result are all processed and rendered entirely in your browser โ€” nothing is ever sent to a server.

Can I use a PDF as the base image, not just a photo?

Yes โ€” upload a PDF and its first page is rendered to a full-resolution image automatically. If it has more than one page, you'll be asked which page to use first.

Will the downloaded image be blurry or low quality?

No โ€” the on-screen editor is a scaled-down preview for convenience, but the final PNG, JPG, or PDF is re-rendered at the original base image's full resolution, not the preview size.

Can I add more than one signature, stamp, or logo?

Yes โ€” add as many overlays as you need from the layer list, each with its own position, size, rotation, opacity, and stacking order (bring forward / send back).

How do I keep the signature from stretching out of shape when I resize it?

Aspect ratio is locked by default โ€” dragging a corner handle resizes proportionally. Use the "Lock aspect ratio" toggle on a selected overlay to turn that off if you need a non-proportional resize.