如何计算Facebook图形API覆盖offset_y像素
how to compute Facebook graph api cover offset_y to pixel?
例如,我可以从图形 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;
这真的适合你吗?我已经用许多图像(横向和纵向)对其进行了测试,如果您使用%,则位置总是略有不同。这对我有好处:
$.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)
;
是的,我实际上自己找到了答案。脸书发送的偏移量是百分比!
以下内容效果很好——
FB.api(artist, function (data) {
$('.ed-cover img').attr('src', data.cover.source)
.css("top", (-1 * data.cover.offset_y) + '%');
});
我在网上找到了这个jquery插件。插件以正确的偏移量正确获取图片
这是链接 http://restyr.com/getting-facebook-cover-photo-with-offset-y-using-fbgetcover-jquery-plugin/
它看起来像是使用偏移量作为百分比
MoXplod,你确定吗?
根据我的经验,偏移量是图像不可见部分的百分比(即不适合窗口的部分)。
例如:偏移量 = 51脸书封面照片大小(网络)= 851X315缩放后的图像大小 = 851X1135顶部= -420px。
所以顶部 = 51% * (1135-315)。
我已经尝试过许多不同尺寸的不同封面照片。
如果您只设置 Facebook API 返回的负百分比偏移量,则它可能在 80% 的情况下有效。但是,获得100%正确位置的唯一方法是使用克劳迪奥斯解决方案。
我正在使用的一些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;
}
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 可扩展的画布作为Google Maps Javascript API中的覆盖
- 谷歌地图api 3使用覆盖选择地点的类型
- 替换Google地图API getTile覆盖中的tile图片
- 是否可以覆盖本机获取 API 以使用所需的承诺库而不是本机浏览器承诺
- 如何计算Facebook图形API覆盖offset_y像素
- 在谷歌地图api上用id覆盖标记点
- 谷歌地图API v3覆盖
- 谷歌地图API v3绘图,雷达回路覆盖,自动更新雷达
- 检测覆盖是否包含标记对象.谷歌地图API V3,绘图库
- 如何在谷歌地图API v3上自定义一个地面覆盖图标动画
- 检测标记是否在谷歌地图上的圆圈覆盖范围内(Javascript API V3)
- 覆盖骨干.同步Rails API认证与设计
- 谷歌地图API v3折线.如何扩展鼠标覆盖区域
- 谷歌地图API:刷新ImageMapType覆盖
- 像素距离在谷歌地图(API V3),以避免重叠的标签/覆盖
- 如何使用Google Maps API V3创建一个不平移的覆盖?
- 谷歌地图api v3覆盖图像与搜索栏
- Android版谷歌地图API v2 -允许用户添加标记或覆盖他们发现的特定事物
- 谷歌地图API v3圈覆盖问题