Obfuscate
Blur Faces and Hide Parts of an Image
Obfuscate lets users hide parts of a photo before they save it, with blur, pixelation or a solid color. Each area is a round, rounded or square shape with its own style and strength, and the saved file matches the preview pixel for pixel. It is in the Full edition.
The editor, running in your browser, opened on a photo with its hidden areas already saved. They are still editable. Photo by Sean Lee on Unsplash.
What It Does
What Obfuscate Gives Your Users
Blur, Pixelate or Solid
Blur (the default) and Pixelate take a strength from 0 to 100, 50 by default. Solid paints a bar in black or any color, always opaque.
Draw, Move and Turn Areas
Drag on the photo to draw an area. Tap one to select it, move it, resize it, turn it or delete it. Shift keeps it square, and areas snap to each other and to the photo center lines and margins.
It Follows the Crop
On a straightened, turned or mirrored photo an area is drawn level on the screen, and from then on it turns with the photo. An area may reach past the edge: only the part over the photo is hidden.
Solid for Text
Blur and pixelation can be reversed, so use Solid to hide text. A solid area is painted under everything that reads the photo, so nothing shows through it.
Opens Redactions Saved by Pintura
A state saved by Pintura opens with its redactions as areas.
In Code
The Props That Control It
Editor.tsx
<EmbedEditor
enableObfuscate={false}
src={src}
/>The Obfuscate tool. Turned off, the areas already in the state stay and are saved.
The edits the photo opens with, areas included. More than 64 areas is refused with INVALID_STATE.
Called with the saved File and the state it was made with.
Use Cases
Where It Fits
Street and Event Photos
Pixelate faces and cover the plate before a street photo is published.
Shipping Labels
Hide the address, the barcode and the names on a parcel label before it is shared.
Documents
Cover signatures and numbers with Solid before a document photo goes to a verifier.
User Uploads
Let people blur a stranger in a photo before it goes on a listing or a profile.
FAQ
Questions
How do I blur faces in an image?
Draw an area over each face and pick Blur, then set the strength from 0 to 100 (50 by default). Areas can be round, rounded or square, and each keeps its own style and strength.
Which style hides text safely?
Use Solid. Blur and pixelation can be reversed. A solid area is painted under everything that reads the photo, so nothing shows through it.
Is what I see what gets saved?
Yes. The preview matches the saved file pixel for pixel, and only the part of an area over the photo is hidden.
How many areas can a photo have?
Up to 64 areas per photo. The user sees a notice at the limit, and a state with more than 64 areas is refused with INVALID_STATE.
How do I turn the tool off?
Set enableObfuscate to false. Areas already in the state stay, drawn and saved.
Try obfuscate in the playground.
It opens with this feature on. Change the edition, the colors and the tools, and copy the code for your app.
More features: Crop, Filters, Annotations, Watermark, Large Photos, White Label.