Question

我维护一个网站，其中包含与列表相关联的大约30,000张图像的数据库。图像是许多不同的尺寸和纵横比，因此为了在网站上以统一的方式呈现它们，我写了一个功能，允许我以特定的宽高比响应地呈现图像。

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;
}

在我的家具＆＃39;文件夹我有一组所需宽高比的透明PNG文件，以强制实际图像成为背景的容器大小。所以，例如，有一个4x3.png文件，这只是一个4px宽，3px高的空图形，我可以用图像调用（＆＃39; path / to / image.jpg＆＃39;，＆＃39; ; 4x3＆＃39;） - 效果很好。

然而，问题出现在图像中有人的脸，作为默认的中心中心＆＃39;定位有时可以切断头部。

我已经完成了面部检测的步骤，数据库中的每条记录都有一个标志，表明是否在图像中找到了面部，如果是，则是X，Y和Width值。问题在于试图找出背景位置，因为我处理的是响应式布局，所以不知道必须知道图像的显示大小。

我假设我需要遵循的逻辑是

如果图像有脸然后使用基于面部的Y坐标计算的垂直偏移设置背景位置其他将背景位置设为中心

如何确定垂直偏移轴承的值时，请注意图像的大小未知？

Answer 1

好的，所以想出了这个，但发布在这里以防万一其他人正在努力解决它。

基本逻辑是根据实际图像的宽度计算出方位窗口的高度（无需担心此阶段的响应特性）。然后，您可以找到放置在框架中的图像的理想中心点，并确定该点是高于还是低于图像在纵横窗口中的滑动范围。

我将它放入我调用的函数中，然后将结果直接放入后台位置CSS。

在下面，变量是：

$ img =图片路径
$ aspect1 =例如16（如果是16x9）
$ aspect2 =例如9（如果是16x9）
$ faceD =如果图像中检测到脸部，则设为1
$ faceY =顶部的Y像素

$ faceW =面部区域的宽度（和高度）

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;
}

我正在使用这个与Karthik Tharavaad的Face Detector的php端口一起使用，它可以合理地创建$ faceY和$ faceW所需的数据。

使用面部检测坐标计算背景位置

1 个答案: