Imaging

The image editor crops to a free or fixed shape — round for an avatar — rotates, flips and straightens; adjusts light and colour with a live histogram and an automatic fix; applies nine looks at any strength; draws arrows, boxes, text, highlights and numbered steps; and redacts, burning pixelation, blur or a solid block into the pixels so nothing underneath survives. Then it saves at the size and in the format you choose.

Everything happens in the browser. A phone photo carries where it was taken, the camera and its serial number, sometimes the owner's name: the editor says what it found and removes it. A photo saved unchanged is cleaned without being compressed again. Put it in front of an upload and every picture is edited and cleaned before it is sent.

A phone photo, cleaned

A stand-in for a photo straight off a phone, with its location, camera, serial number and owner inside. Open the note under the picture to see them. Crop it, straighten it, give it a look — then save it and see what the saved file carries.

Save it and check what the file carries

Keyboard: the tools are tabs; on the picture, the arrow keys move the crop (with Alt they resize it) or the selected mark, Delete removes a mark, + and - zoom, and Ctrl+Z undoes. Every slider is a real range input.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-image-editor id="im-photo" lang="en-GB" label="Photo editor" actions="reset,download" aspect-ratios="free,original,1:1,4:5,3:2,16:9" style="inline-size: 100%; --bmx-image-editor-height: 40rem"></bmx-image-editor>

A profile picture, from an upload

Choose any photo of your own. The upload hands it to the editor first: crop it round, brighten it, press Done, and what joins the upload is a 512-pixel PNG with no metadata at all. Nothing leaves this page.

Your picture appears here.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-upload id="im-upload" label="Profile picture" accept="image/*" auto-upload="false" description="JPEG, PNG or WebP. You crop it before it is added."></bmx-upload>
<bmx-dialog id="im-dialog" heading="Crop your picture" size="lg" dismissible="false">
  <bmx-image-editor id="im-avatar-editor" lang="en-GB" tools="crop,adjust,filter" aspect="1:1" lock-aspect crop-shape="circle" max-width="512" max-height="512" type="image/png" actions="cancel,apply" style="--bmx-image-editor-height: 30rem"></bmx-image-editor>
</bmx-dialog>

Redact before you share

A screenshot of an order with a name, an email and a card number on it. Draw boxes over anything private, or press the button to hide the card. Pixelation is coarse enough that text cannot be read back, and the saved file holds only the redacted pixels. Point at the problem with an arrow and a numbered step.

Hide the card and the email

Point at the total

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-image-editor id="im-redact" lang="en-GB" tools="redact,annotate,crop" actions="reset,download" type="image/png" style="inline-size: 100%; --bmx-image-editor-height: 34rem"></bmx-image-editor>

Clean every upload, without compressing it again

No editing at all: each picture added here is cleaned on its way in — location, camera, owner, comments and XMP taken out, the pixels left exactly as they were. Add your own photos, or the stand-in phone photo.

Add the stand-in phone photo

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-upload id="im-clean" label="Photos to send" accept="image/jpeg,image/png,image/webp" multiple auto-upload="false"></bmx-upload>