Last updated: September 25, 2024

<span aria-hidden="true" id="how-to-blur-faces-in-photos-with-transloadit"></span>

# How to blur faces in photos with Transloadit

![Joseph Grabski](/assets/images/teammates/joseph2.png?dpl=dpl_6nhQNS5wkVkPZWuKMzXcWrAHNJL5)

**Joseph Grabski**

Content Lead · Rochester, United Kingdom · Show bio

[](https://x.com/joe%5Fgrabski)[](https://github.com/Missing-Tech)

In an age of heightened privacy concerns and strict data protection regulations, the importance of protecting people's identities in visual content is paramount. The new `blur_regions` parameter for the [/image/resize](/docs/robots/image-resize.md) Robot provides a simple and powerful solution for blurring faces in photos, enabling developers to painlessly integrate this functionality into their own products.

![Minimalist banner with the text 'Censor faces automatically' on the left, and a blank face with abstract shapes and lines on the right.](/_next/static/immutable/media/opengraph-image.1aefqilv_w-7v.png)

<span aria-hidden="true" id="how-to-blur-faces-in-photos"></span>

## How to blur faces in photos

Blurring faces in photos – especially when dealing with a large number of files – is a process that can quickly spiral out of control, taking resources away from the parts of your project you really want to be focusing on. Luckily, with Transloadit the whole thing becomes as easy as two simpleSteps.

Let's take a look at the Template below.

```json
{
  "steps": {
    "faces_detected": {
      "use": ":original",
      "robot": "/image/facedetect",
      "faces": "max-confidence",
      "format": "preserve",
      "result": true
    },
    "blur_faces": {
      "use": "faces_detected",
      "robot": "/image/resize",
      "format": "jpg",
      "blur_regions": [
        {
          "x": "${file.meta.faces[0].x1 + (file.meta.faces[0].width / 2)}",
          "y": "${file.meta.faces[0].y1 + (file.meta.faces[0].height / 2)}",
          "width": "${file.meta.faces[0].width}",
          "height": "${file.meta.faces[0].height}"
        }
      ],
      "blur": "0x10"
    }
  }
}

```

Our first Step uses the [/image/facedetect](/docs/robots/image-facedetect.md) Robot to obtain the coordinates of the face that is present in the image. The result of this Step is stored in the metadata of the image, which we then pass to our `blur_faces` Step.

We can then use the [/image/resize](/docs/robots/image-resize.md) Robot to blur the face in the image. To do so, we specify a blur region with an `x` and `y` coordinate set to the midpoint of the face.

**Note**

We ue `faces[0]` for the `x` and `y` coordinates, but `faces[0]` for the `width` and`height`. This is because the [/script/run](/docs/robots/script-run.md) Robotexecutes JavaScript, so we need to use `faces[0]` to access an element of an array. PureAssembly Variables, however, are executed on our own engine, meaning they can be accessed with `faces[0]`.

In the background, the [/script/run](/docs/robots/script-run.md) Robot is invoked to first retrieve the metadata from the file, and then to halve the retrieved value. Each of our blur regions is an ellipse, and we can match the dimensions of the ellipse to the dimensions of the face, using [Assembly Variables](/docs/topics/assembly-instructions.md#assembly-variables). To tweak the strength of the blur, use the `blur` parameter, in the format `{radius}x{sigma}`, which we set to a value of `0x10` for the purpose of this demo.

<span aria-hidden="true" id="the-result"></span>

## The result

Running the Template gives us the below result.

![Man standing near a balcony, with only his face blurred, so his identity is hidden.](/_next/static/immutable/media/2023-06-man-standing-blurred.3-9ze38jx98j8.jpeg)

![Man standing near a balcony, with his face in focus.](/_next/static/immutable/media/2023-06-man-standing.0k-ttbr_qg3nq.jpg)

Man standing near balcony, Philip Martin, [Unsplash⁠](https://unsplash.com/photos/man-standing-near-balcony-5aGUyCW%5FPJw)

You can drag the blue dot to the left or right to see the original image or the blurred variant.

Notice how only the region covering the face is blurred, leaving the rest of the image untouched.

That brings us to the conclusion of this blog post. We are really excited for you to get your hands on this new feature, so open up the [Template Editor](/c/templates/new/), and try it out for yourself.

[#assembly](/blog/tags/assembly.md)[#image-resize-robot](/blog/tags/image-resize-robot.md)[#image-facedetect-robot](/blog/tags/image-facedetect-robot.md)[#script-run-robot](/blog/tags/script-run-robot.md)[#walkthrough](/blog/tags/walkthrough.md)

### 👩‍💻 Join 20k+ developers

Sign up for our [monthly newsletter](/newsletters.md) to receive direct links to 3 exclusive tech — and 2 product updates. No less, no more.

Your email:

Get access

## File uploading and encoding. Made simple.

Transloadit streamlines file handling for developers, trusted by brands like Coursera and The New York Times. We’re known for a reliable API, top-notch support, and a strong commitment to open source, with projects like [Uppy⁠](https://uppy.io) and [Tus⁠](https://tus.io) setting standards in file processing.

[Sign up](/c/)[Book a Demo](https://survey.typeform.com/to/kRg47Xi5)

No credit card needed · 5 GB included in the free plan

Cancel anytime