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 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.

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 simple Steps.

Let's take a look at the Template below.

{
  "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": "1000x0"
    }
  }
}

Our first Step uses the /image/facedetect 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 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 use faces[0] for the x and y coordinates, but faces.0 for the width and height. This is because the /script/run Robot executes JavaScript, so we need to use faces[0] to access an element of an array. Pure Assembly Variables, however, are executed on our own engine, meaning they can be accessed with faces.0.

In the background, the /script/run 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. To tweak the strength of the blur, use the blur parameter, in the format {radius}x{sigma}, which we set to a value of 1000x0 for the purpose of this demo.

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.
Man standing near a balcony, with his face in focus.
Man standing near balcony, Philip Martin - Unsplash

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, and try it out for yourself.