脸谱图API:offset_y offset_x [英] facebook graph api: offset_y offset_x

问题描述

你好，我试图了解offset_y在facebook图形API中的含义 https://developers.facebook.com/docs/graph-api/reference/cover-photo/.

Hello I am trying to understand what offset_y means in facebooks graph API https://developers.facebook.com/docs/graph-api/reference/cover-photo/.

我已尝试理解此相关文章，但不能. 如何计算Facebook图形api覆盖的offset_y到像素?

I have tried understanding this related post, but cannot. how to compute Facebook graph api cover offset_y to pixel?

例如，此事件. https://www.facebook.com/events/1119146318216486/.调用图形图api时会生成'offset_y":20'

For example, this event. https://www.facebook.com/events/1119146318216486/. produces an '"offset_y": 20' when calling the graph api

但是，实际偏移量是-4px:

But, the actual offset is -4px:

任何帮助将不胜感激.

推荐答案

offset_x和offset_y的值是原始图像大小的百分比，而不是像素值.

The values for offset_x and offset_y are percentages of the size of the original image, not pixel values.

百分比范围是0到100，将是该空间调整大小后的图像的溢出偏移值的百分比.

The percentages will range from 0 to 100, and will be a percentage of the overflow offset value of the resized image for the space.

例如，我有一个720x480像素的图像.封面照片空间为851x315 px，因此，当调整照片大小以适合该空间时，大小为851x567.33 px.如果在放置封面时将图像拖到一半，返回的offset_y将是50.这将转化为封面照片插槽中无法容纳的剩余"空间的50％.

For example, I have an image that is 720x480 px. The cover photo space is 851x315 px, so when the photo is resized to fit that space, it is 851x567.33 px. If I drag that image halfway down when I am positioning it for my cover, the offset_y that is returned will be 50. This translates to 50% of the "leftover" space that doesn't fit into the cover photo slot.

剩余"垂直(y)空间将为567.33-315 = 252.33像素.该空间的50％是126.167.在这种情况下，我的top偏移为-126.167像素.

The "leftover" vertical (y) space will be 567.33 - 315 = 252.33 px. 50% of that space is 126.167. My top offset, in this case, will be -126.167 px.

所以offset_x和offset_y是将调整大小后的图像定位到Facebook上的照片空间所需的像素移动的百分比.

So offset_x and offset_y are percentages of the pixel movement required to position the resized image into the photo space on Facebook.

// These values retreived ahead of time (Graph API, etc.)
var offset_x = 0;
var offset_y = 50;
var fbCoverPhotoWidth = 851; // Known value, in pixels
var fbCoverPhotoHeight = 315; // Known value, in pixels

// Create an image from the cover photo URL returned by the Graph API
var img = new Image();
img.src = "https://scontent.xx.fbcdn.net/v/t1.0-0/p480x480/your-photo-url-here.jpg";

// Calculate the scaling ratio
var ratio = Math.max(fbCoverPhotoWidth / img.width, fbCoverPhotoHeight / img.height);

// Convert the offset percentages to pixel values
var offset_x_pixels = Math.ceil(((img.width * ratio) - fbCoverPhotoWidth) * (offset_x / 100));
var offset_y_pixels = Math.ceil(((img.height * ratio) - fbCoverPhotoHeight) * (offset_y / 100));

console.log(offset_x_pixels);
console.log(offset_y_pixels);

这篇关于脸谱图API:offset_y offset_x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！