How Face Blur Patches Stay Aligned During Export

Source: Dev.to

Blurring a face is easy if you only care about a static demo.
It gets more interesting when the user can redetect faces, expand padding, move patches, resize them, disable individual faces, change blur strength, and then export the final image without everything drifting out of alignment.

The architecture that held up best for us was patch‑based.

The full companion guide is here:

First build one blurred source image

Instead of blurring each patch independently, the editor creates a blurred version of the entire source image first:

ctx.filter = `blur(${blurStrength}px)`;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
ctx.filter = "none";

That gives the editor one reusable blur source for every detected face.

Practical advantages

• Changing blur strength rebuilds a single source image.
• Existing patches keep their geometry.
• Face interactions stay fast.

Every face is a cropped image patch

Each detected face becomes a FabricImage patch that points into the blurred source image:

const patch = new FabricImage(this.blurredSourceElement!, {
  left: region.left + region.width / 2,
  top: region.top + region.height / 2,
  width: region.width,
  height: region.height,
  cropX: region.left,
  cropY: region.top,
});

The editor is not blurring arbitrary rectangles on demand; it shows cropped windows into a pre‑computed blurred image.

Geometry and crop source have to move together

When the user drags or resizes a blur patch, the patch’s visible rectangle and the crop window inside the blurred source must stay aligned. The implementation normalizes the patch back into real geometry and updates cropX and cropY alongside position and size:

patch.set({
  left: geometry.left + geometry.width / 2,
  top: geometry.top + geometry.height / 2,
  width: geometry.width,
  height: geometry.height,
  cropX: geometry.left,
  cropY: geometry.top,
  scaleX: 1,
  scaleY: 1,
});

This reset turns temporary drag/scale transforms back into stable source‑image coordinates.

Padding matters before editing starts

Face detections are usually too tight, so the code expands each detection by a configurable percentage before converting it into a patch. This gives users a better starting point and reduces the number of patches that need manual resizing to cover the edges of a face properly. It’s a small step, but it makes the blur tool feel much less fragile.

Export should replay the current patch set

When the user exports, the editor builds a fresh StaticCanvas at the original size, adds the untouched base image, then re‑adds each visible blur patch with its current geometry and crop source. The saved file therefore reflects:

• Current blur strength
• Current patch positions
• Current patch sizes
• Current enabled/disabled state

Nothing depends on the on‑screen viewport.

Why patch‑based blur works

This model stays understandable under real editing pressure:

• One blur source
• Many editable crop windows
• Normalized geometry after interaction
• Export rebuilt from source pixels

That is what keeps blur regions aligned even after several rounds of detection, adjustment, and export.

More implementation details: