Javascript 如何计算Facebook graph api覆盖偏移到像素？

我可以从graph api检索facebook封面来源和偏移量，例如-

我明白了-

"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>

JS-

---

但是这里“top”属性的CSS偏移量是不正确的，因为我得到54，实际偏移量是-135px

是的，我自己找到了答案。facebook发送的偏移量以百分比表示

以下各项运作良好：

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

---

这真的对你有用吗？我已经用很多图像（横向和纵向）对它进行了测试，如果使用%，位置总是略有不同。这对我有好处：

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

---

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

这里是链接

---

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

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

我正在使用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;
        }

private$\u cropX=850；
私人美元=315；
私人$或GIGNALHEight；
私有$\u origignalWidth；
$scale=$this->caclScale（$cover->cover->source）；
$thumb=\PhpThumb\u工厂：：创建（$imagePath）；
$real\u img\u y=（$this->\u cropX*$this->\u origignalHeight/$this->\u origignalWidth）-$this->\u cropY；
$real\u img\u x=（$this->\u cropY*$this->\u origignalWidth/$this->\u origignalHeight）-$this->\u cropX；
$offset=$this->\u authSession->offset；
$offset\u x=（$real\u img\u x*$offset['x']/100）；
$offset_y=（$real_img_y*$offset['y']/100）；
$thumb->crop（$offset\ux，$offset\uy，$this->\ucropx，$this->\ucropy）；
$thumb->save（$imagePath）；
专用函数caclScale（$url）{
$originalFileSizeParams=@exif\u read\u data（$url）；
////$originalFileSize=$originalFileSizeParams['FileSize']；
//Zend_Debug:：dump（$originalFileSizeParams）；
//模具（）；
$this->_origingnalheight=$originalFileSizeParams['COMPUTED']['Height']；
$this->_origingnalwidth=$originalFileSizeParams['COMPUTED']['Width']；
如果（$this->\u origingnalwidth<$this->\u cropX）{
$scale=（$this->\u cropX*100）/$this->\u origignalWidth；
}否则{
$scale=100；
}
返回$scale；
}
MoXplod，你确定吗

根据我的经验，偏移量是图像不可见部分（即不适合窗口的部分）的%

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

因此top=51%*（1135-315）

我试过很多不同大小的封面照片
 是的，我的答案也适用于我，它看起来和facebook的封面一模一样。到目前为止，我已经尝试了4种不同的图像。因此，我可能没有测试所有可能的场景。您可能希望在加载处理程序中调用positionate_cover，例如：.attr（'src'，data.cover？data.cover.source:''）.load（function（）{if（data.cover）cover.positionate_cover（data.cover.offset_y）；}）；
$.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)
;

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