Crop & Image Size — Captures Editor

What it does

The captures editor gets a unified resizing workflow. Three operations share one popover:

  • Crop — cut out a rectangular region of the current image
  • Scale — resize the whole image to a new pixel size (with fast / smooth interpolation)
  • Canvas — extend the drawing area around the image, filling the new space with any background color or leaving it transparent

The ribbon also gets a proper color-picking workflow: a Photoshop-style foreground / background swatch with swap and reset buttons, a quick 8-color palette, an always-visible hex input, and a transparent toggle. Drawing tools that can be filled (rectangle, ellipse) use the foreground color for the stroke and the background color for the fill.

How to use it

Crop

  1. Click the Crop tool in the ribbon (or press C).
  2. Drag on the canvas to define a rectangle — a live W × H overlay follows the cursor.
  3. Fine-tune via the 9-point anchor grid that appears on the selection, or by typing exact dimensions into the W / H inputs in the ribbon.
  4. Hold Shift while dragging to constrain to the original image aspect ratio.
  5. Press Enter (or click Apply) to commit the crop.
  6. Already have W × H filled in? Just click anywhere on the canvas — the crop frame places itself using the currently-selected anchor.

Scale / Canvas

  • Click the Scale (⊡) or Canvas (⬚) icon in the ribbon.
  • Type the target W / H (click the × between them to load the current image dimensions), then Apply.
  • For canvas resize, pick a background color — leave it transparent to keep the alpha channel on PNG / GIF export.

More options

Click the Crop Size… / Image Size… / Canvas Size… text button in the ribbon to open the full popover. It has three tabs (✂ Crop / ⊡ Scale / ⬚ Canvas), aspect-ratio presets (1:1, 3:2, 4:3, 16:9, Original, Custom), an anchor grid, and a Use original size button on every tab.

Repeat the last operation

Ctrl+Shift+R repeats the last crop / scale / canvas operation — each op is remembered separately, so the shortcut follows whichever mode is currently active. The Repeat last button in the popover footer and the ribbon’s Apply button (Shift + hover) do the same thing.

Colors

The color area in the ribbon now shows:

  1. FG / BG overlapping squares (Photoshop style) — click either to open the full color picker. A small ▾ marks which slot you’re editing.
  2. ⇄ swap arrow — swap foreground and background (also X key).
  3. Reset button — one click restores FG = black, BG = white.
  4. Transparent toggle (checkerboard swatch) — flips BG between the last picked color and transparent.
  5. Quick palette — 8 most-used colors; left-click sets FG, right-click sets BG.
  6. Hex input — always visible; native OS color picker square + # prefix + text field. Typing or pasting a hex like #00fd00 is accepted; the # is stripped automatically.

The full color picker popover (opens when you click the FG or BG square) has four tabs — Palette, Hex, RGB, HSL — that stay synced: typing in RGB updates the hex preview live, clicking a palette swatch updates everything. The “Transparent” option appears as a checkerboard swatch in the palette grid (background color only — strokes can’t be transparent).

Filled shapes

Rectangle and ellipse tools now respect both colors:

  • Foreground = stroke (always drawn)
  • Background = fill (drawn only when a color is set; transparent BG → outline-only shapes)

Keyboard shortcuts

Key Action
M Select tool
C Crop tool
Shift+C Crop tool + clear W/H (freehand crop)
R / O / L / A Rectangle / Ellipse / Line / Arrow
P / T / H / B Pencil / Text / Highlight / Blur · Redact
X Swap FG / BG colors
Enter Apply crop / resize (when a crop frame is set)
Ctrl+Shift+R Repeat last crop / scale / canvas operation
Ctrl+Z / Ctrl+Y Undo / Redo — unwinds annotations first, then the last image op
Ctrl+0 Zoom to actual size (100%)
Ctrl+1 Zoom to fit screen
Ctrl++ / Ctrl+- Zoom in / out
F11 Canvas full-pane mode
Alt+Shift+↑ / Alt+Shift+↓ Move the current line up / down (inside the shared code editor)

Press ? anywhere in captures to open the full shortcut list.

Edge cases & known limits

  • Transparent backgrounds are only preserved by PNG, GIF, and 32-bit BMP output. Saving as JPEG flattens them onto white.
  • Repeat last works only within the same Blue Synergy session’s browser storage; the last states are remembered via localStorage but do not sync across devices.
  • The Highlight (H) and Blur (B) tool shortcuts collide with the Flash-Burst session keys. This is harmless — flash-burst keys only fire while a burst is active; in normal editing these select the tool.
  • When you set BG to transparent and press X to swap, FG receives the last non-null BG color (not black). A subsequent X puts that color back into BG, so repeated swaps alternate cleanly.