Calculating background position with face detection co-ordinates - php

Question

I maintain a site that has a database of roughly 30,000 images associated with a listing. The images are many different sizes and aspect ratios, so in order to present them in a uniform manner on the site I've written a function that allows me to present the image responsively at a specific aspect ratio.
function image($src,$aspect) {
$html = '<img class="img-responsive" src="furniture/blank-'.$aspect.'.png" style="background:url(\''.$src.'\');background-position:center center;background-size:cover;" >';
return $html;
}
In my 'furniture' folder I have a set of transparent PNG files in the desired aspect ratio to force the size of the container that the actual image becomes the background to. So, there's a 4x3.png file for instance, which is just a 4px wide by 3px high empty graphic that I can call with image('path/to/image.jpg','4x3') - it works pretty well.
However, the problem comes when the image has someone's face in it, as the default 'center center' positioning can sometimes cut off heads.
I've already done the step of face detection, and each record in the database has a flag as to whether a face was found in the image and if so, the X, Y and Width values. The issue is then trying to figure out the background position because I'm dealing with a responsive layout, so don't know necessarily know what size the image is displayed.
I'm assuming the logic I'll need to follow is;
IF image has face in it
THEN set the background-position with a vertical offset calculated based on the Y coordinate of the face
ELSE
set the background-position to center center
How do I figure out the value of the vertical offset bearing in mind the size of the image is unknown?

Answer 1

Ok, so figured this one out but posting here just in case anyone else is struggling with it.
The basic logic is to work out the height of the aspect window based on the width of the actual image (no need to worry about the responsive nature at this stage). You then find the ideal central point of the image to put in the frame and work out whether that point is above or below the limits of how your image can slide within your aspect window.
I put this into a function I call and then drop the result directly into the background-position CSS.
In the below, the variables are:
$img = path to the image
$aspect1 = e.g. 16 (if 16x9)
$aspect2 = e.g. 9 (if 16x9)
$faceD = Set to 1 if the image has a face detected in it
$faceY = Y pixel of top of face
$faceW = Width (and Height) of face area
function calcImagePosition($img,$aspect1,$aspect2,$faceD,$faceY,$faceW) {
if($faceD==1) { // Only do this if there's a face in the image
list($width, $height) = getimagesize($_SERVER['DOCUMENT_ROOT']."/".$img); // Get the image dimensions
$aspectHeight = ($width/$aspect1)*$aspect2; // Get the height of the aspect window based on the actual width of the image
$idealCentre = $faceY + ($faceW/2); // The best part of the image to appear in the aspect window is halfway down the face bounds
if($idealCentre<($aspectHeight/2)) { // if the ideal centre is higher than half the height of the aspect window, just set it to top
$position = "center top";
} elseif(($height-$idealCentre)<($aspectHeight/2)) { // Also, if there's less than half the height of the aspect window at the bottom, set it to bottom
$position = "center bottom";
} else { // This will slide the position to best match the face
$pixel = $idealCentre-($aspectHeight/2); // Get the absolute pixel value
$percent = intval(($pixel/$height)*100); // Convert this to a percentage so it doesn't matter about responsive sizing
$position = "center ".$percent."%";
}
} else {
$position = "center center"; // default for no face detection
}
return $position;
}
I'm using this in conjunction with Karthik Tharavaad's php port of the Face Detector which does a reasonable job of creating the data needed for $faceY and $faceW.