Question

我使用图表api端点/PAGE_ID/posts来获取Facebook页面上的所有帖子。现在我想要这些帖子的全尺寸图像。返回对象的图片属性仅为我提供该图像的裁剪版本。

使用来自这些帖子的对象ID和API端点/OBJECT_ID/picture，我得到了图片中唯一的小，普通和专辑大小的版本。但是通过对URL的一点修改，我设法获得了完整大小的图像。

示例

此网址：
https://graph.facebook.com/10152843929471041/picture

重定向到此网址：
https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpa1/t31.0-8/s720x720/10838228_10152843929471041_5251228402651650719_n.jpg

我从该网址中删除了720x720以获取此网址：
https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpa1/t31.0-8/s/10838228_10152843929471041_5251228402651650719_n.jpg

最后是完整尺寸的图像。

我认为，我可以使用正则表达式模式实现此修改。但现在是我的问题，如何从原始网址（第一个）重定向后获取网址。

任何想法或更简单的解决方案？

Answer 1

这是你可以拍摄更大图片的方法：

/OBJECT-ID/picture?width=500&height=500

或者：

/OBJECT-ID/picture?type=large

另请参阅此主题中的答案：Facebook Graph API : get larger pictures in one request

编辑：由于这似乎不适用于对象ID，您只需从此响应中获取图像：

https://graph.facebook.com/10152843929471041

留意＆＃34;图像＆＃34;阵列。

Answer 2

还可以请求images photo对象的MyFacebookWrapper.getBestImage = function(photoId) { var deferred = new $.Deferred(); var params = { fields: "images" }; FB.api("/" + photoId, "get", params, function (response) { console.log("MyFacebookWrapper.getBestImage, response:"); console.log(response); var images = _.sortBy(response.images, 'width'); var best = _.last(images) deferred.resolve(best); } ); return deferred.promise(); };集合，然后搜索最高分辨率条目。

见documentation。代码：

MyFacebookWrapper.getBestImage("photo Id ...").then(function(image) {
    console.log(image);
});

用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>FV Runners</title>
  <meta charset="UTF-8">
  <link href="styles/normalize.css" rel="stylesheet" />
  <link href="styles/my_style.css" rel="stylesheet" />
<style>
.panel{
display:none;
color: orange;
}

#a:hover {
    color: gray;
}

.accordion + .panel:not(.active) {
  display: none;
}


</style>
</head>

<body>
  <div id="header">
    <h1>Fox Valley Runners Club</h1>
  </div>

  <div id="main"></div>

  <div id="pics">
    <div class="race_box">
  <img src="images/run1.jpg" id="5kpic" /><br />

  <figcaption>5k/10k Events</figcaption>

  <div class="races" id="5k">
    <h3>5k/10 Events</h3>
    <ul>
      <li class="accordion" id="a">Mini Sprint</li>
        <div class="panel">
            <p>10/30/17, Memorial Park, Appleton</p>
        </div>
        <br>
      <li class="accordion" id="a">Iron Horse</li>
      <div class="panel">
            <p>11/6/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Twilight Trail</li>
      <div class="panel">
            <p>11/13/17, River's Edge Park, Wrightstown</p>
        </div>
    </ul>
    </div>

    </div>

    <div class="race_box">
  <img src="images/run2.jpg" id="halfpic" /></button><br />
  <figcaption>Half Marathon Events</figcaption>

  <div class="races" id="half">
    <h3>Half Marathon Events</h3>
    <ul>

      <li class="accordion" id="a">Fox River Marathon</li>
      <div class="panel">
            <p>10/15/17, Pierce Park, Appleton</p>
        </div>
        <br>
      <li class="accordion" id="a">N.E.W. Half Marathon</li>
      <div class="panel">
            <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Winnebago Run</li>
      <div class="panel">
            <p>11/27/17, Menominee Park, Oshkosh</p>
        </div>

    </ul>
  </div>
    </div>

    <div class="race_box">
  <img src="images/run3.jpg" id="fullpic" /><br />
  <figcaption>Full Marathon Events</figcaption>

  <div class="races" id="full">
    <h3>Full Marathon Events</h3>
    <ul>

      <li class="accordion" id="a">Cheesehead Marathon</li>
      <div class="panel">
            <p>9/24/17, Pamperin Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Chain O'Lakes Marathon</li>
      <div class="panel">
            <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Fox Cities Marathon</li>
        <div class="panel">
            <p>11/12/17, Menominee Park, Oshkosh</p>
        </div>


    </ul>
  </div>
    </div>

  </div>


  <script>


  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
 acc[i].onclick = function(){
    this.classList.toggle("active");


    var panel = this.nextElementSibling;
    if (panel.style.display === "none") {
        panel.style.display = "block";
    } else {
        panel.style.display = "none";

        }
    }
}

从facebook图API获取全尺寸图片

2 个答案: