User Interface Overview

AutoCropper is a browser-based tool that finds every photo on a scanned page and exports each one as its own file. You upload scans (JPEG, PNG, TIFF, HEIC or PDF), AutoCropper draws a crop box around each photo it detects, you adjust anything it got wrong, and you export the batch as a zip. This page walks through the workspace one area at a time. Every screenshot was taken from the live demo, which is the real editor loaded with three sample scans, so you can follow along without uploading anything.

If you are new, the how-to guide is a shorter first read. The pages on uploading scans, adjusting crops, exporting crops and settings go deeper on each step.

The workspace at a glance#

1. App bar. The site strip: the logo, your free plan counter, the upload button and your account.
2. Scan list. One row per uploaded file. Click a row to open that scan.
3. Toolbar. Tools, the Grid and Single switch, undo and redo, Templates and Batch, and the app menu. When a crop is selected, the middle of the bar becomes the selection strip.
4. Canvas. The scan with its crop boxes. Each box is one photo that will be exported.
5. Right sidebar. Either Crop options (exact numbers for the selected crop) or Extracted images (a tile per crop), switched from the toolbar.
6. Export button. Exports every crop in the batch. While scans are still being processed it shows the progress instead.

The layout above is the desktop layout, which you get on any window wider than about 650 pixels. On a phone the same tools are arranged in bars along the bottom of the screen.

Quick reference#

On a Mac, read Cmd wherever the table says Ctrl.

The app bar#

1. Logo. Back to the home page. Leaving the page with unexported crops asks you to confirm first.
2. Free plan counter. How many free scans you have left today, with a link to go unlimited. Paying customers do not see this.
3. Upload your scans. On the demo, this takes you to the real upload page. On the crop page it appears once the batch has been exported, as Crop more scans, and starts a new batch.
4. Account. Log in, or open your account page when you are signed in.

The toolbar#

The toolbar sits above the canvas. On a wide window every button has a label and the four app buttons sit at the right end of the bar. On a narrower window the labels drop away one group at a time, and the four app buttons fold into a single More options button with three dots.

1. 4-Point. Arms the four-point crop tool. Click the four corners of a tilted photo and AutoCropper draws a rotated crop that fits them. Press Esc to leave the tool. The C key toggles it.
2. Grid and Single. Grid view shows every scan at once in a scrollable grid. Single view shows one scan at a time and enables the scan list and the scan navigator.
3. View. How crop outlines are drawn on the canvas, and the light or dark theme. These affect the workspace only, never the exported photos.
4. Undo. Steps back through every edit in the batch: moves, resizes, rotations, deletions, pastes and editor changes. Ctrl+Z.
5. Redo. Steps forward again. Ctrl+Shift+Z or Ctrl+Y.
6. Templates. Save the crop layout of the current scan and apply it to other scans.
7. Batch. Actions on every crop at once: expand, shrink, sync across scans, or clear.
8. Help. Replay the welcome tour, open the keyboard shortcuts list, or open the how-to guide, these docs or what's new in a new tab.
9. Settings. Opens the Settings dialog.
10. Change Sidebar. Switches the right sidebar between Crop options and Extracted images.
11. Submit Feedback. Sends a message to the developer, with optional screenshots.

The View menu#

1. Outline color. The color of every crop box on the canvas. Blue by default.
2. Thickness. Small, medium or large outlines.
3. Opacity. Faded or solid outlines.
4. Theme. Light or dark. The theme applies to the cropping tool only.

None of these change your exported photos. To print a border into a photo, use the Border option in the Advanced Crop Editor.

Templates#

A template is the set of crop boxes on one scan: how many there are, where they sit and how big they are. It is useful when you scan the same layout again and again, for example a sheet of four prints in the same positions every time.

1. Save current layout. Names and saves the current scan's crops as a template.
2. Apply current layout to other scans. Copies the current scan's crops to this scan only, to every scan, or to scans you pick, either replacing their crops or adding to them. You can also link the copies as a sync group, so a change on one scan repeats on the others.
3. Saved templates. One row per saved template. Pick one to apply it. Once you have saved a template, a Manage templates item appears here for renaming and deleting.

Templates are saved in your browser when you are signed out and in your account when you are signed in.

Batch#

1. Expand all crops. Grows every crop by two percent. Useful when detection ran a little tight on a whole batch.
2. Shrink all crops. The opposite.
3. Sync all crops across scans. Turns every crop on the current scan into a synced crop that repeats on every other scan. See synced crops below.
4. Clear crops. Deletes crops in bulk, from the current scan or from every scan.

In Single view the menu's actions apply to the crops on the current scan. In Grid view they apply to every crop on every scan, and the menu's header says which.

1. Current Image. Deletes every crop on the selected scan.
2. All Crops. Deletes every crop in the batch. Undo brings them back.

Help, Settings, Change Sidebar and Feedback on a narrower window#

1. Settings. The same Settings dialog as the toolbar button.
2. Switch sidebar panel. The same as Change Sidebar.
3. Replay welcome tour. Runs the four-card tour that new users see on their first batch.
4. Keyboard shortcuts. Opens the shortcuts list.
5. How-to guide. Opens the how-to guide in a new tab.
6. Documentation. Opens these docs in a new tab.
7. What's new. Opens the release notes in a new tab.
8. Submit feedback. Opens the feedback form.

When a crop is selected#

Select a crop and the middle of the toolbar changes. Templates and Batch step aside for the selection strip.

1. Edit Photo. Opens the selected crop in the Advanced Crop Editor, where you can name it, straighten it, add a border and set its metadata.
2. Duplicate. Makes a copy of the selected crop on the same scan.
3. Sync. Converts the selected crop into a synced crop that repeats on every scan. On a synced crop this button becomes Unlink, which takes the crop out of its group.
4. Delete. Deletes the selection, after a confirmation you can switch off.
5. Clear selection. Deselects. Esc does the same.

When several crops are selected, a chip at the left of the strip shows the count. Edit Photo and Duplicate need a single crop and are disabled until you narrow the selection. Delete removes all of them at once.

The scan list#

The scan list is the left column. It is only shown in Single view, because Grid view already shows every scan.

1. Scan count. How many files are in the batch.
2. A scan. A thumbnail, the scan's number in the batch, the file name, and a status line. While a file is still loading the status reads Preparing, Converting or Detecting photos. Afterwards it is the number of crops found, or No photos found.
3. Viewed check. Appears on a scan once you have looked at it in Single view, so you can tell which scans you have reviewed in a long batch.
4. Current scan. The scan on the canvas, with an eye icon.
5. Grid and Single. The same switch as the one in the toolbar.

Click a row to open that scan. With nothing selected, the Left and Right arrow keys step to the previous and next scan and wrap around at the ends.

The canvas#

The canvas shows the scan and its crop boxes. Each box is one photo. The number on each box is its position in reading order, left to right and top to bottom, and it is the number the exported file gets: a crop numbered 5 on scan1.jpg exports as scan1_5.jpg under the default naming.

Grid view and Single view#

1. Grid. Shows every scan in a scrollable grid. Good for a quick review of what detection found across the whole batch.
2. A scan tile. Click a crop on any tile to select it. The scan rotate buttons appear when you hover a tile.
3. Tile number. The scan's position in the batch.
4. Tile size. In Grid view the zoom buttons make the tiles larger or smaller.

Single view shows one scan at a time, large, with the scan list on the left. It is the view for careful adjustment. The Grid and Single buttons in the toolbar switch between them, and switching clears the selection.

Zoom, scan navigation and rotating a scan#

1. Zoom out. The Minus key does the same. Ctrl+scroll also zooms. The percentage beside it is the current zoom.
2. Zoom in. The Plus key does the same.
3. Fit width. Fits the scan's width to the window.
4. Fit page. Fits the whole scan on screen.
5. Previous scan. Left arrow. Unlike the arrow key, the button works even with a crop selected. The count beside it shows which scan you are on, with a check once you have viewed every scan.
6. Next scan. Right arrow. On the last scan it goes back to the first.
7. Rotate scan left. Turns the whole scan a quarter turn counter-clockwise. The crops turn with it.
8. Rotate scan right. The same, clockwise. A scan with synced crops cannot be rotated until its crops are unlinked.

Rotating a scan is instant, because the export reads your original file and applies the turn at export time.

A crop box#

1. Selected crop. Click a crop to select it. The selection shows as a moving dashed border. Drag anywhere inside the box to move it.
2. Position number. The crop's place in reading order, and the number in its export file name.
3. Corner handle. Drag to resize from that corner. Hold Shift while dragging to keep the aspect ratio.
4. Edge handle. Drag to resize one edge. The edge handles appear when you hover or select the crop.
5. Rotate grip. Drag to rotate the crop around its centre. With Rotation snap on in Settings, the angle snaps to quarter turns.
6. Edit photo. Opens the crop in the Advanced Crop Editor. Double-clicking the crop does the same.
7. Delete crop. Deletes this crop. Ctrl+click it to delete the whole selection.

A crop that is synced across scans also carries a small link badge beside its number.

Drawing a new crop#

Drag on any empty part of the scan, outside the existing boxes, and a new crop is drawn and selected when you let go. On a touch screen, press the Add crop button that appears at the bottom right of the canvas first, then drag.

Selecting more than one crop#

Ctrl+click adds a crop to the selection or removes it. Clicking a synced crop selects its whole group. Ctrl+A selects every crop on the scan, or every crop on every scan in Grid view. Ctrl+C copies the selection and Ctrl+V pastes the copies onto the current scan. Delete or Backspace deletes everything selected, and Esc deselects.

The right-click menu#

1. Edit photo. Opens the Advanced Crop Editor.
2. Duplicate. Copies the crop.
3. Preview in new tab. Opens the crop as it will export, at full resolution, in a new browser tab.
4. Delete. Deletes the crop. On a synced crop the menu also offers Unlink from sync group.

4-Point mode#

1. 4-Point, armed. The button stays highlighted while the tool is on. Press it again, or Esc, to leave.
2. Hint. Counts the corners as you click them. Backspace takes the last corner back. The fourth click creates a rotated crop that fits the four points.

This is the fastest way to crop a photo that was scanned at an angle: four clicks, and the crop is already straight.

Synced crops#

A synced crop is one crop repeated on every scan as a linked group. Move or resize it on one scan and the copies follow. Use it when every scan has the same layout, for example a batch of slides or a run of pages from the same album. Each copy is scaled to its own scan, so a group drawn on a large scan lands in the same relative place on a smaller one. Synced crops carry a link badge beside their position number. To release one scan's copy, select it and choose Unlink.

The right sidebar#

The right sidebar has two panels. Crop options shows the exact numbers behind the selected crop. Extracted images shows a tile for every crop on the current scan. The Change Sidebar button in the toolbar switches between them, and the app remembers which one you left open.

Crop options#

1. Resize handle. Drag to make the sidebar wider or narrower. Double-click it, or press Enter on it, to reset the width.
2. Turn left. Turns the photo a quarter turn counter-clockwise without moving the box.
3. Turn right. The same, clockwise.

The labelled fields, top to bottom:

• Name. The file name this photo will be exported with, shown as it will be written. Type over it to give the photo its own name, which wins over the naming rule and follows the photo if crops are reordered; clear the field to go back to the automatic name. The same field is in the Advanced Crop Editor.
• Width and Height. The size of the exported photo in pixels. Type a value to resize the crop.
• X Position and Y Position. Where the crop's left and top edges sit on the scan, in pixels.
• Rotation. The crop's angle in degrees. Type a value to rotate it.
• Straighten. Removes the tilt and keeps the orientation. Disabled when the crop is already straight.
• Aspect ratio. Locks the crop to a ratio: Free, 1 to 1, 4 to 3, 16 to 9, or a custom ratio you add and keep for later.
• Metadata. Opens the photo's description and date taken, the same fields as in the editor.

Until a crop is selected the Name field reads Select a photo to name it and the other fields are disabled.

Extracted images#

1. Selection count. The selected crop's place among the scan's crops, or the total when nothing is selected.
2. Position number. The same number the crop carries on the canvas.
3. Delete crop. Deletes the crop.
4. Turn left. A quarter turn counter-clockwise.
5. Turn right. A quarter turn clockwise.
6. View cropped image. Opens the photo in a new tab.
7. Advanced editor. Opens the crop in the Advanced Crop Editor.

Click a tile to select its crop and scroll the canvas to it, and double-click it to open the editor. The name under each thumbnail is the file name the photo will be exported with, updated live as crops are added, removed or renamed.

The Export button sits under the tiles. The number in its label is how many photos the whole batch will export.

Tiles follow the canvas: selecting a crop anywhere scrolls its tile into view, and the tiles run in the same reading order as the numbers on the canvas.

The Advanced Crop Editor#

The editor opens one crop at a time, large, for the adjustments that need precision: straightening, reframing, naming, a border and the photo's metadata. There are five ways in: double-click a crop, click the small Edit photo button on a hovered crop, choose Edit photo from the right-click menu, press Edit Photo in the toolbar with a crop selected, or press Advanced editor on a tile in Extracted images.

1. Rotation. Quarter turns and fine tilt. See below.
2. Crop navigation. Previous and next crop, in reading order. Left and Right arrows do the same, and continue onto the next scan at the end of this one.
3. Scan navigation. Previous and next scan. Shift with Left or Right.
4. View zoom. Zooms the view, not the crop. The mouse wheel or a trackpad pinch zooms around the pointer, and 0 fits the photo back to the view.
5. Editor preferences. Auto-save changes, Close editor after Apply, and Outline other crops, which draws the scan's other crops as ghosts so you can see where this one sits.
6. Panel. Name, output size, metadata and border. See below.
7. Close. With auto-save on, which is the default, your changes are already saved and Close just leaves. With auto-save off the panel shows Apply Changes and Cancel instead.

Inside the editor, drag inside the crop box to move it and drag its handles to resize it. Drag on the photo outside the box, or on the dark area around it, to pan the view. The square brackets, [ and ], shrink and grow the crop by one pixel on every edge, or ten with Shift. Ctrl+Z and Ctrl+Shift+Z undo and redo within the editor. Esc closes it.

Rotation#

1. Rotate 90 degrees left. A quarter turn counter-clockwise.
2. Tilt strip. Drag left or right to tilt the crop by a fraction of a degree at a time. This is how you straighten a photo that was scanned slightly askew.
3. Angle. The current angle. Double-click it to straighten to zero.
4. Rotate 90 degrees right. A quarter turn clockwise.

The panel#

1. File name. The exported file's name, generated from the scan's name and the crop's number until you type your own. A typed name wins over the naming rule, follows the photo if crops are reordered, and becomes the photo's title in its metadata; clear the field to go back to the automatic name. Press Enter to keep the name and move to the next photo with the field ready. The line under it is the exported photo's size in pixels, updated as you resize.
2. Date. The date the photo was taken, written to its EXIF metadata. Type a year, a month and year, or a full date.
3. Add border. Prints a border into the exported photo, with a width in pixels and a color. This is the only border that reaches the file.

Close leaves the editor; with auto-save on, every change is already saved. Preview in new tab opens the photo as it will export. The Description is written into the photo's metadata, beside the typed name as its title, so both show in photo apps and file search. Metadata is written to JPEG files only.

Export#

1. Preview. The first photo as it will export. The arrows, or the Left and Right keys, step through every photo in the export, so you can check a setting before you commit to it.
2. Reset to defaults. Puts every option back to the stock values.
3. Export. Starts the export. The dialog shows the progress and then a receipt naming the zip and where it went.

The options, by their headings in the dialog:

• Scope. This scan only, or every scan. Shown when more than one scan has crops.
• Output size. Natural keeps each photo's own size. Pad to aspect ratio adds a background around each photo to reach a ratio such as 4 to 5 or 1 to 1, with a color fill, or a transparent fill when the format is PNG.
• Format. JPG, JPEG or PNG. The two JPEG options are the same encoding with a different file extension. Beside it, the quality for JPEG: Max, High, Medium or Standard. PNG is always lossless.
• Capture margin. Grows or shrinks every crop's boundary on export, by a percentage. A positive value keeps a little of the page around each photo, a negative value trims tighter.
• Filename. The scan's name plus the crop's number, or a custom template built from the scan's name, the photo's position on its scan and its number across the batch. Pad numbers writes 01, 02 and so on so files sort in order. A name typed on a photo wins over both. See exporting crops.
• Date taken. One date written into every exported JPEG's EXIF, for a batch that was all shot around the same time.
• Save to. Ask me where to save opens your browser's save window at the start of the export so you can pick the folder. Without it, the zip goes to your Downloads folder, or the photo itself when the export holds just one.

The export runs in your browser. Nothing is uploaded, and a batch of hundreds of photos is written as one zip named with the date and time, or as a few numbered zips when it is very large. The settings you export with become the defaults for the next batch. For padding, backgrounds and naming patterns in detail, see exporting crops.

Settings#

1. Export tab. File naming: the scan's name plus a number, or a custom pattern. Format, output size and capture margin are chosen in the Export dialog itself.
2. Detection tab. Detect upright orientation, which turns a sideways photo the right way up, and Ignore minor rotations, which keeps nearly straight photos straight. The detection algorithm is chosen on the upload page.
3. Editor tab. Auto-save in the Advanced Crop Editor, Rotation snap, Close editor after Apply, and Outline other crops.
4. Appearance tab. Light or dark theme for the cropping tool.
5. Reset to defaults. Restores every setting. Apply still has to be clicked.
6. Apply. Saves the settings. They are kept in your browser and used for every batch.

The settings page describes each option in more detail.

Keyboard shortcuts#

On a Mac, read Cmd wherever the table says Ctrl.

In the Advanced Crop Editor:

Names that changed#

If you learned AutoCropper from an older version of this page, or from a video, some controls have new names.

Where to go next#

Try everything on this page in the demo, then upload your own scans. The FAQ answers the questions we are asked most, and if something here does not match what you see, the Submit Feedback button in the toolbar reaches the developer directly.