Facebook 그래프 API offset_y를 픽셀로 계산하는 방법은 무엇입니까?

Question

내가 예를 들어 그래프 API에서 페이스 북 커버 소스와 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 
    } 

를 참조 -

https://graph.facebook.com/Inna

을 나는이를 얻을 수 상단 오프셋은 -135 픽셀입니다. 어떻게 계산됩니까?

facebook과 같은 오프셋으로 내 웹 사이트에 someones 표지 사진을 표시하고 싶습니다. 그래서 기본적으로 내가 뭐하는 거지 -

<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가 부정확하고 실제 오프셋은 -135 픽셀입니다.

Answer 1

예 실제로 답변을 찾았습니다. 페이스 북이 보낸 오프셋은 백분율입니다!

다음

는 완벽하게 작동 -

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 플러그인을 발견했습니다. 플러그인은 바로 여기

이 백분율로 오프셋 사용하고 http://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/

그것의 그것과 같이 링크 오프셋 제대로 사진을 찍어

Answer 4

만 부정적인 비율이 페이스 북 API에 의해 반환 된 오프셋을 설정하는 경우, 그것을 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 북 커버 사진 크기 (웹) = 851X315 스케일 이미지 크기 = 851X1135 가기 = -420px.

그래서 최고 = 51 % * (1135-315).

다양한 크기의 여러 가지 표지 사진을 사용해 보았습니다.