How to blur faces in photos with Transloadit
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.
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": "0x10"
}
}
}
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.
faces[0] selects the first detected face for all four coordinates and dimensions in this
example. The x and y expressions calculate its midpoint; width and height use the
detected dimensions directly.
The arithmetic in the x and y expressions invokes
Dynamic Evaluation through the
/script/run Robot. The width and height
expressions are simple metadata lookups and remain free. Each of our blur regions is an ellipse,
and we can match its dimensions 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 0x10 for the purpose of this demo.
The result
Running the Template gives us the below result.
Move the comparison slider 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.