Professional and Affordable Web Design

0800 080 5401

Live photo blurring script - faces, number, plates, etc

In our recent project we came across a need for a script that will blur out part of an image. This feature is mostly needed to make people faces blurred out - but also to remove any personal data, like licence plate numbers, etc. We wanted our users to have a smudge tool that would works exactly like in Photoshop, but in their browser. Unfortunately, as it turns out, it is way too much to ask for from Java Script, and even if we would succeed in adding such a feature, it would most likely work really slowly.

At this moment we were left with two options – use Adobe Flash or Java Script with PHP.
And as we try to avoid Flash as much as possible, we went for the second one.

Our solution is pretty simple – we are using ImageMagick that is being executed by PHP. The blurring itself takes place on the server, but full control of it is through browser. On the client side we have Java Script that allows user to select region that he wants to blur out, and then when user confirms by clicking on a link an AJAX message is sent to the PHP script, containing coordinates of user's selection.

On the browser side we used jQuery with a very nice plugin called imgAreaSelect that allows user to select rectangle-shaped area of image for bluring out. It took us a while to find the blur command for ImageMagick that would blur out only part of the image.

Here is the code for blurring:

PHP image blurring code
convert inputImage \( +clone -blur 10x8 \) \ 
          \( +clone -gamma 0 -fill white \ 
          -draw 'rectangle x1,y1 x2,y2' -blur  10x4 \) \ 
          -composite outputImage

Another way to make some part of an image less recognisable is to pixelate it, you can use following command for that:

PHP image pixelating code
convert inputImage \( +clone -scale 20% -scale 500% \) \ 
          \( +clone -gamma 0 -fill white \ 
          -draw 'rectangle x1,y1 x2,y2' -blur  10x4 \) \ 
          -composite outputImage

Of course you should change inputImage, outputImage filenames and coordinates (x1,x2,y1,y2) to match your requirements. In our example coordinates are passed through GET by AJAX query. The full PHP part of the script should look like following:

PHP part of code
$x1 = $_GET['x1']; 
$y1 = $_GET['y1']; 
$x2 = $_GET['x2']; 
$y2 = $_GET['y2']; 
$inputImage = $_GET['inputImage']; 
$outputImage = 'output_'.$_GET['inputImage'];

exec( "convert {$inputImage} \( +clone -blur 10x8 \) \ 
          \( +clone -gamma 0 -fill white \ 
          -draw 'rectangle {$x1},{$y1} {$x2},{$y2}' -blur  10x4 \) \ 
          -composite  {$outputImage}" ); 

echo $outputImage;

The JavaScript takes care of retrieving coordinate values from imgAreaSelect and sending them to our PHP script by AJAX, so for person using it, it appears as images is transformed on their own machine. Using a callback function we replace presented image with a newly transformed one once PHP is finished with its job.

Useful links

Comments3 Comments

Roman

The downloadeble example is not working for me, I've all installed and the imagick is working so as imagick shell commands :/ could you help me? nice script any way.

30 November 2009

vinod

great work, you helped me, keep posting helpful script thanks

01 August 2010

Ben

Hi this is great! For some reason the link to your blur example does not work, but I got the example to work when I downloaded the code and set it up on my server. It works but it does not pixalate / blur the area you select but instead it pixalates / blurs the whole image. Any idea why? Great job!

09 November 2010

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of dsbs.co.uk website
dsbs.co.uk

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of countysecurity.co.uk website
countysecurity.co.uk

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »

-