如何从 facebook javascript SDK 获取个人资料图片？答案

【问题标题】：How to fetch profile picture from facebook javascript SDK?如何从 facebook javascript SDK 获取个人资料图片？
【发布时间】：2014-07-30 10:01:31
【问题描述】：

我正在尝试从 facebook 获取个人资料图片。现在我正在从 facebook 获取所有信息，但无法获取用户的个人资料图片。这是我的代码：

function getFBData () {
    FB.api('/me', function(response) {
      fbinfo = new Array();
      fbinfo[0] = response.id;
      fbinfo[1] = response.first_name;
      fbinfo[2] = response.last_name;
      fbinfo[3] = response.email;
      FB.api('/me/picture?type=normal', function (response) {
         var im = document.getElementById("profileImage").setAttribute("src", response.data.url);
         alert(im);
        });

如何从这个 API 的响应中获取图片。

【问题讨论】：

您是否通过 FB.login() 中的范围请求 user_photos 权限？
在尝试将其插入 DOM 之前，还要仔细检查 response.data.url 是否确实包含某些内容。
个人资料照片不需要用户照片权限，只有当您想访问所有个人资料照片和所有相册时。
@LUKE Peterson，我只想获取当前用户个人资料图片。
@Luke Peterson 我现在已经调用了 FB.login 函数我只需要个人资料图片。

标签： javascript ajax facebook

【解决方案1】：

为什么不直接使用已经检索到的 id 直接显示图片呢？为什么需要打一个额外的电话？

例如

function getFBData () {
FB.api('/me', function(response) {
  fbinfo = new Array();
  fbinfo[0] = response.id;
  fbinfo[1] = response.first_name;
  fbinfo[2] = response.last_name;
  fbinfo[3] = response.email;

     var im = document.getElementById("profileImage").setAttribute("src", "http://graph.facebook.com/" + response.id + "/picture?type=normal");
});
}

例如 http://graph.facebook.com/4/picture?type=normal 重定向到 Mark Zuck 的图片

如果您在登录 url 时遇到问题，以确保您获得了有效的 id，然后将 url 粘贴到浏览器中。

【讨论】：

【解决方案2】：

试试喜欢

FB.api("/me", {fields: "id,name,picture"}, function(response)
{

    FB.api(
            {
                method: 'fql.query',
                query: 'SELECT pid, src_big, src_big_height, src_big_width FROM photo WHERE aid IN ( SELECT aid FROM album WHERE owner="' + response.id + '" AND name = "Profile Pictures")'
            },
            function(data1) {
                alert( data1[0].src_big );
            }
    );

});

这将为您提供图像的链接，您可以适当地使用它

One More Option

【讨论】：

您的链接重定向到不需要的广告页面。
这是一篇很老的帖子，很可能已经被删除或更改了。

【解决方案3】：

@hiraa 是对的，但缺少代码。就这样吧

FB.api('/me', {fields: 'id,name,email,picture'}, function (response) {
    var picture_url = picture.data.url;
});

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
@MikeT 他们不是在要求澄清，而是在赞扬 hiraa，他说了要更改的内容但没有提供代码。
没错。无论如何，你想让我改变我的答案吗？
太棒了！作品！谢谢。但是图片太小了，怎么放大？再次感谢！
@DevRenanGaspar 很晚了，但是对于更大的个人资料图片，您可以使用 FB.api('/me', {fields: 'id,name,email,picture.width(500).height(500) '}, 函数（响应）{ var picture_url = response.picture.data.url; });

【解决方案4】：

我已经尝试过了，并且运行成功。试试这个：

FB.api('/me', { fields: 'id, name, email' }, function(response) 
{
    var userInfo = document.getElementById('user-info');
    userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name ;

});

希望你得到答案。

【讨论】：

【解决方案5】：

试试这个：

FB.api('/me/picture?type=normal', function(response) {
    var str="<img style='border: 3px solid #3a3a3a;' src='"+response.data.url+"'/>";
    return str;
});

【讨论】：

【解决方案6】：

我知道这篇文章很旧，但其他答案是给我的网站提供了损坏的链接（将用户 ID 与 URL 的其余部分连接以获取图像）。

我发现正确的方法如下（根据这里的官方文档：https://developers.facebook.com/docs/graph-api/reference/user/picture/）：

/* make the API call */
FB.api(
    "/{user-id}/picture",
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);

从官方文档中获取用户头像的方式

【讨论】：

【解决方案7】：

function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
    document.getElementById('profilepic').innerHTML = '<img src="'+response.picture.data.url+'"/>';

}); }

【讨论】：

【解决方案8】：

应该不是response.data.url....试试response.picture.data.url

【讨论】：

【解决方案9】：

你可以试试这些例子：

function(){
  var url=null;
    FB.getLoginStatus(function(response){

  if (response.status === 'connected') {
    console.log("getting photo")
    FB.api(
    "/me/picture",
    function (response) {
      if (response && !response.error) {
      console.log(response);
      url=response.data.url;
      console.log(url);
    }else {
      console.log("Error Occured");
    }
    }
);
  }
});
  return url;
};

【讨论】：

【解决方案10】：

您可以按照此链接的说明进行操作> https://developers.facebook.com/docs/facebook-login/web/

默认情况下，当您尝试从配置文件中获取响应时，您只会得到 id 和 name

FB.api('/me', function(response) {
  console.log('Successful login for: ' + response);
});

但是如果你想得到email和picture你需要像这样添加参数

FB.api('/me' {fields: "id, name, email, picture"}, function(response) {
  console.log('Successful login for: ' + response);
});

【讨论】：