如何计算 Facebook 图形 api 覆盖 offset_y 到像素？答案

【问题标题】：how to compute Facebook graph api cover offset_y to pixel?如何计算 Facebook 图形 api 覆盖 offset_y 到像素？
【发布时间】：2012-05-01 05:00:00
【问题描述】：

例如，我可以从图形 api 中检索 facebook 封面源和 offset_y -

https://graph.facebook.com/Inna

我明白了 -

"cover": {
      "cover_id": "10151356812150381",
      "source": "http://sphotos.xx.fbcdn.net/hphotos-snc7/s720x720/419277_10151356812150381_302056140380_23114100_97822830_n.jpg",
      "offset_y": 54
   }

但是当我查看实际的 facebook 页面时，我看到顶部偏移量是 -135px。那是怎么从 54 算出来的？

我想在我的网站上显示某人的封面照片，偏移量与 facebook 相同。所以我基本上是在做 -

<div class="ed-cover">
            <img src=""/>
    </div>

CSS -

.ed .ed-cover
{
    height:315px;
    overflow:hidden;
    position:relative;
}

.ed .ed-cover img
{
    width:100%;
    position:absolute;    
}

JS -

FB.api(artist, function (data) {
                        $('.ed-cover img').attr('src', data.cover.source).css("top", -1 * data.cover.offset_y);
                    });

但是这里“top”属性的 CSS 偏移是不正确的，因为我返回 54 并且实际偏移是 -135px；

【问题讨论】：

标签： javascript css facebook facebook-graph-api

【解决方案1】：

这对你真的有用吗？我已经用许多图像（风景和肖像）对其进行了测试，如果你使用 %，位置总是略有不同。这对我很有用：

$.fn.positionate_cover = function (offset_y) {
    var cover_w = 850;
    var cover_h = 315;
    var img_w = $(this).width ();
    var img_h = $(this).height ();
    var real_img_h = (cover_w * img_h / img_w) - cover_h;

    $(this).css ({ top: parseInt (real_img_h * offset_y / 100 * -1) + "px" });
};

$(".ed-cover img")
    .attr ("src", data.cover.source)
    .positionate_cover (data.cover.offset_y)
;

【讨论】：

是的，我的答案也适用于我，它看起来与 Facebook 封面一模一样。到目前为止，我已经尝试了 4 种不同的图像。所以我可能没有测试所有可能的场景。
您可能希望将 positionate_cover 调用放在 load 处理程序中，例如：.attr('src', data.cover ? data .cover.source : '').load( function() { if (data.cover) cover.positionate_cover (data.cover.offset_y); });

【解决方案2】：

是的，实际上我自己找到了答案。 facebook 发送的偏移量是百分比！

以下工作完美 -

    FB.api(artist, function (data) {
                            $('.ed-cover img').attr('src', data.cover.source)
.css("top", (-1 * data.cover.offset_y) + '%');
                        });

【讨论】：

【解决方案3】：

我在网上找到了这个 jquery 插件。该插件使用正确的偏移量正确获取图片

这里是链接http://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/

它看起来像使用偏移量作为百分比

【讨论】：

【解决方案4】：

MoXplod，你确定吗？

根据我的经验，偏移量是图像不可见部分的百分比（也就是不适合窗口的部分）。

例如：偏移量 = 51 facebook 封面照片尺寸（网络）= 851X315 缩放图像大小 = 851X1135 顶部 = -420 像素。

所以顶部 = 51% * (1135-315)。

我已经尝试了许多不同尺寸的不同封面照片。

【讨论】：

【解决方案5】：

如果您只设置 Facebook API 返回的负百分比偏移量，它可能适用于 80% 的情况。然而，获得 100% 正确位置的唯一方法是使用 Claudios 解决方案。

【讨论】：

【解决方案6】：

我正在使用 PhpThumb_Factory 的一些 php 解决方案：

        private $_cropX = 850;
        private $_cropY = 315;
        private $_origignalHeight;
        private $_origignalWidth;

 $scale = $this->caclScale($cover->cover->source);
        $thumb = \PhpThumb_Factory::create($imagePath);

                            $real_img_y = ($this->_cropX * $this->_origignalHeight / $this->_origignalWidth) - $this->_cropY;

                            $real_img_x = ($this->_cropY * $this->_origignalWidth / $this->_origignalHeight) - $this->_cropX;

                            $offset = $this->_authSession->offset;


                            $offset_x=($real_img_x * $offset['x'] / 100);



                            $offset_y=($real_img_y * $offset['y'] / 100);

                            $thumb->crop($offset_x, $offset_y, $this->_cropX, $this->_cropY);

                            $thumb->save($imagePath);


    private function caclScale($url) {
            $originalFileSizeParams = @exif_read_data($url);
    //            //$originalFileSize = $originalFileSizeParams['FileSize'];
    //            Zend_Debug::dump($originalFileSizeParams);
    //            die();

            $this->_origignalHeight = $originalFileSizeParams['COMPUTED']['Height'];
            $this->_origignalWidth = $originalFileSizeParams['COMPUTED']['Width'];

            if ($this->_origignalWidth < $this->_cropX) {
                $scale = ($this->_cropX * 100) / $this->_origignalWidth;
            } else {
                $scale = 100;
            }
            return $scale;
        }

【讨论】：