Does Facebook display the offset position to crop a larger version of the user's profile thumbnail?

Question

Recently, I noticed that in the layouts of the new Timeline profile, Facebook widely uses the "normal" version (read: more) of the user profile image, both on the timeline and in the friends list. As we all know, this image is retrieved by querying the graph using:

https://graph.facebook.com/[userid]/picture?type=normal 

Of course, this image is not a guaranteed square culture. However, Facebook uses the CSS element layer to place and crop manually (see image below). Positioning is interesting in that it would seem to be generated before rendering the page.

Cm:

Notice how the CSS style is applied at the element level. In this case, this is the top offset:

 style="top:-50%" 

I assume this pulls out an arbitrary offset / position value somewhere (graph, db, etc.) without using the client-side JS interface to detect the face, since the process of setting up a new Facebook profile picture (usually) includes manual cropping of the face. See for yourself: change the image of your profile, and if the proportions are not square, then there is an intermediate step of manual cropping.

In addition, this image is sent to /photo.php with x, y, width, height, and other various parameters passed. I know some of them are used to create a 50x50 square, but it also needs to be stored somewhere else, right?

My question is whether Facebook currently provides a method for extracting these offset values ​​so that we can precisely twist the larger profile images without having to rely on face recognition or client side processing to ensure that the object is centered.

Answer 1

Answering my own question here. Looking at http://developers.facebook.com/docs/reference/fql/profile/ , I noticed that you can get the following with a FQL query in the profile table:

pic_crop | string | string

The URL of the largest square profile image for the question. The image has a width of at least 100 pixels. This URL may be empty.

My emphasis is on the last bit.

The answer is as follows:

 <fql_query_response list="true"> <profile> <pic_crop> <uri>https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/xxxxxx_xxxxxxxx_xxxxxxxxxx_n.jpg</uri> <width>180</width> <height>173</height> <left>0.08468</left> <top>0.06897</top> <right>0.91532</right> <bottom>0.93103</bottom> </pic_crop> </profile> </fql_query_response> 

Voila: image size and crop location. Naturally, the only caveat is that the last bit is in bold. URL may be blank.

Answer 2

Say hello to Shakira.

As you can see, the smallest is the cropping version (manual + face recognition), it is easy to calculate the relative position in the middle image, when you have the X and Y coordinates, as well as W and H, they probably store it in the database , and calculate the percentage, server side. So far, I have not seen them offer something like that. You can end up only calculating it with these images, but it will cost you. Set the background image to center center and hope for the best :)

Answer 3

I have the same problem. pic_crop, as for documentation, contains the pixel coordinates of the user-selected crop for this profile image. This means that if the user does not select a 160x160 culture, you will receive a portrait or landscape. This is confirmed by the data that I get from my tests:

 { "uri": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/xxxxxxxxx_n.jpg", "width": 180, "height": 286, "left": 0, "top": 0, "right": 1, "bottom": 1 } 

From this information, I can’t understand how to make my own circle 160x160, centering the face.