如何計算Facebook圖形API覆蓋offset_y像素？

我可以從圖形API獲取的Facebook蓋源和offset_y例如 -如何計算Facebook圖形API覆蓋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); 
        });

但此處的CSS偏移「頂」屬性是不正確的，我回來54實際偏移量是-135px;

來源

2012-05-01 MoXplod

是的，我真的找到了答案。 Facebook發送的偏移量以百分比表示！

下面的工作完美 -

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

來源

2012-05-02 21:57:16 MoXplod

是否真的爲你工作？我用很多圖像（橫向和縱向）測試了它，如果使用％，位置總是略有不同。這裏這對我很好：

$.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) 
;

來源

2012-05-03 15:44:40

是的，我的答案也適用於我，它看起來完全像Facebook封面。直到現在我已經嘗試了4種不同的圖像。所以我可能沒有測試過所有可能的場景。 – MoXplod

您可能希望將該調用放置到** load **處理程序的** positionate_cover **中，例如：.attr（'src'，data.cover？data.cover.source：''）.load（function（） {data.cover） cover.positionate_cover（data.cover.offset_y）; }）; – Orwellophile

我發現這個jquery插件在網絡中。該插件正確地得到的圖片與右偏移

這裏是鏈接http://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/

它看起來它採用偏移量爲百分比

來源

2012-07-01 14:13:47 rbistro

如果只設置通過Facebook的API的負百分比偏移返回，它可能在80％的情況下工作。然而，獲得100％正確位置的唯一方法是使用Claudios解決方案。

來源

2013-02-25 13:05:38

PHP的一些解決方案，我正在使用PhpThumb_Factory：

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

來源

2013-03-22 12:55:28 mexekanez

MoXplod，你有把握嗎？

根據我的經驗，偏移量是圖像不可見部分的百分比（即不適合窗口的部分）。

例如：偏移量= 51 Facebook的封面照片大小（幅）= 851X315 縮放的圖像大小= 851X1135 頂部= -420px。

因此最高= 51％*（1135-315）。

我試過用不同尺寸的不同封面照片。

來源

2014-03-23 22:16:47 EugeneMi

如何計算Facebook圖形API覆蓋offset_y像素？

回答

相關問題