Facebookのグラフapiのオフセットoffset_yをピクセルに計算する方法は？

Question

私は例えばグラフAPIからFacebookのカバー源とoffset_yを取得することができます -

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

しかし、私はこのため、実際のFacebookページを見たとき、私は見る -

https://graph.facebook.com/Inna

を、私はこれを取得上部のオフセットは-135ピクセルです。 これは54からどのように計算されますか？

facebookと同じオフセットで私のウェブサイトにsomeones cover photoを表示したいと思います。だから私は基本的にやっている -

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

しかし、私は戻って54を得るよう "トップ" プロパティについてはこちらをオフセットCSSが間違っていると実際のオフセットは-135pxです。

Answer 1

はい私は実際に自分自身で答えを見つけました。 Facebookが送るオフセットはパーセンテージです！

以下は完全に働いた -

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

Answer 2

は本当にあなたのために働くことにしていますか？私は多くの画像（風景と肖像）でテストしています。％を使用すると、位置は常に少し異なります。これはここで私にはうまくいく：

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

Answer 3

このjqueryプラグインがネットに見つかりました。プラグインは右で正しく画像を取得し、ここで

をオフセット、それはあなたが唯一、それをFacebookのAPIで返さ負のオフセットの割合を設定した場合の割合

Answer 4

としてオフセットを使用しているようにリンクhttp://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/

ITSは見ています80％のケースで動作する可能性があります。しかし、100％正しい位置を取得する唯一の方法は、Claudiosソリューションを使用することです。

Answer 5

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

Answer 6

MoXplodを、あなたはそれについてよろしいですか？

私の経験から、オフセットは画像の目に見えない部分（別名、ウィンドウに収まらない部分）の％です。例えば

： オフセット= 51 Facebookのカバー写真サイズ（ウェブ）= 851X315 スケーリング画像サイズ= 851X1135 トップ= -420px。

トップ= 51％*（1135-315）

私はさまざまなサイズの多くの異なるカバー写真でそれを試しました。