Image Watermarker for Batch Text Overlays
A photo that travels without a label is hard to trace once it lands in someone else's feed. This page draws your own text over a picture with the canvas API, entirely inside the tab, so the file never gets uploaded. Type a line such as © Example, pick tiled, centered, or bottom right placement, then set how dark, how large, and how slanted the stamp should be. The result renders at the full size of the photo and downloads as a PNG. Run it again on the next photo with the same settings when you have several to do.
Stamp Your Text Across Any Photo
How It Works
Picking a file decodes it with an Image element and paints it onto the preview canvas. The preview is capped at 720 pixels wide, while the natural width and height are kept for the real render, so a 4000 pixel photo still exports at 4000 pixels. The pixels stay in the tab, and the same file can be stamped as many times as you like without a second upload.
Pressing Watermark image opens an offscreen canvas at the natural size of the photo and paints the original into it first. Font size is worked out from the height of the image: the size percentage is applied to that height and then clamped between 12 and 240 pixels, which keeps a stamp readable on a thumbnail and on a poster alike. At the default 8 percent on an 800x600 photo, the size lands on 48 pixels. The opacity slider is divided by 100 and clamped between 0.05 and 1, then written into an rgba fill built from the color picker, so the default white stamp fills as rgba(255, 255, 255, 0.35).
Placements come from one function that takes the width, the height, and your settings. Tiled mode builds a grid whose steps are the estimated text width plus a gap equal to the font size, and the grid is measured across its rotated extent so the corners stay covered at 90 degrees. Every stamp is then drawn the same way: save the context, translate to the point, rotate by the angle converted from degrees to radians, and fill the text with centered alignment before restoring. Centered and bottom right hand back a single point from that same function, so the drawing loop never has to branch.
The finished canvas is encoded as a PNG blob and handed to the download link, and the summary line reports the file name, the pixel size, and the style of the stamp. Re-running replaces the previous link, so only the file you are looking at is ever one click away.
Before and After
file: photo.png
size: 800x600
mark: none
state: waiting for the runsummary: Watermarked photo.png at 800x600 with a tiled stamp
link: [ Download watermarked.png ]opacity: 5%
angle: -30 degrees
size: 8%
state: mark disappears over bright areasopacity: 35%
angle: -30 degrees
size: 8%
state: corner mark reads on light and dark areasfile: none
text: watermark line ready
state: button pressed anywayissues: Choose an image before adding a watermark
summary: No watermark applied.
link: hiddenUse Cases
| Developer | Production | Workflow |
|---|---|---|
| Mark a screenshot before it goes into a public bug report | Stamp product photos with the store name before upload | Label event photos shared with a client for review |
| Watermark a design comp so feedback stays attached to the file | Add a copyright line to portfolio images before publishing | Mark class handouts that get printed and copied |
| Test canvas text rendering across angles and opacities | Brand a set of property photos corner by corner | Keep one preset while working through a folder |
| Check that the PNG export keeps the overlay sharp after scaling | Tag press images with the outlet that holds the copy | Prepare a tiled preview for a slide deck review |
Common Mistakes and Troubleshooting
- Dropping opacity below 15 percent. The stamp fades into bright areas of the photo, and a platform that re-encodes the file washes out what is left.
- Pushing the size past 15 percent in tiled mode. The letters overlap into a gray band instead of reading as repeated text.
- Forgetting that the angle runs from -90 to 90 degrees. At either end of that range the text climbs straight up the frame.
- Assuming the mark survives an edit. Treat it as a label on the file rather than as a barrier for a determined editor.
- Pressing the button with no photo selected. The issues line reports the missing file and no download link appears.
- Picking a file the browser cannot decode. Anything other than PNG, JPEG, or WebP is reported under the button instead of drawn.
Best Practices
- Keep opacity between 25 and 45 percent for photos that still have to look clean.
- Use a short line of text. Fewer characters hold a larger font at the same coverage, and readers parse the stamp faster.
- Match the color to the picture: white stamps read on dark scenes, black stamps read on snow and sky.
- Stamp the full-size photo first, then run the result through the image compressor when the file has to travel over a slow connection.
- Choose tiled for drafts that may be cropped, and a single corner stamp for published work that has to stay tidy.
Frequently Asked Questions
Can someone remove a watermark from my photo?
A determined editor can paint over or clone out a text stamp, and a JPEG that has already been compressed makes the job easier. This tool marks ownership and makes a casual repost easy to trace, and it is not a lock on the picture. Keep the original file private and publish a smaller copy when the photo has to stay controlled.
What opacity should I use on a photograph?
Around 35 percent suits most photos, which is where this page starts. Bright skies and snow call for a slightly darker stamp, while a busy street scene calls for a slightly higher value. Anything under 15 percent fades out in highlights, and anything above 60 hides the picture behind the text.
When is tiled better than a single stamp?
Tiled repeats the text over the whole frame, which suits drafts and previews that get passed around before publication. Centered draws one large mark in the middle, and bottom right puts a single line in the corner for a quiet credit. Choose tiled when the photo may be cropped, and a single stamp when the composition has to stay clean.
Does this tool watermark a batch of photos?
One photo is loaded per run, so a folder is handled by picking the next file and pressing the button again. The text, placement, opacity, angle, and size stay on the page between runs, so the settings never need retyping. That also makes it easy to check each result before moving on to the next file.
Why does the output download as a PNG?
PNG is written straight from the canvas with lossless encoding, so the edges of the letters stay sharp. A photo that needs a smaller file can be converted to JPEG after the stamp is applied. The source format is not carried over, because the canvas redraws the pixels on every run.
What happens when the photo goes to social media?
Platforms re-encode images on upload, and a faint stamp loses contrast during that pass. Raise the opacity a little and keep the size above 6 percent when the picture will be posted. Very small corner marks are the first thing a recompression pass softens.
Does my photo get uploaded anywhere?
No. The file is read into the tab with the File API, drawn onto a canvas, and turned into a local download link. Nothing is sent to FlowStack, and closing the tab discards the image along with the link.