Instagram 会为 portrait/landscape 张图片提供方形缩略图吗?

Will Instagram serve square thumbnails for portrait/landscape images?

我们的网站中有一个自定义的 Instagram 集成,其设计假定(并且目前取决于)它显示的图像是正方形的。

Instagram 今天宣布他们将支持风景和肖像照片。有没有办法只加载正方形 images/thumbnails 即使 Instagram 图片是 portrait/landscape?

是的是的。

我只是花了一些时间四处逛逛,发现了一些有趣的东西。

简短回答: API 仍在 return 处理图像的方形版本,即使是作为肖像或风景上传的图像。如果您还想要原始的横向/纵向图像,则必须做一些修改——详情如下——直到他们在 API 回复中解决它。

示例:看到这张 Taylor Swift 的照片,由 IG 博客 post 中提到的一位用户上传/新闻稿 -- @johnbenett

https://instagram.com/p/6ZVIHTJLYg/

这是原始上传的照片 - 肖像 512 px x 640 px

这是 Instagram API returns,用于上述肖像图像的各种图像(包括缩略图)。

  "images": {
    "low_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s320x320/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
      "width": 320,
      "height": 320
    },
    "thumbnail": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
      "width": 150,
      "height": 150
    },
    "standard_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg",
      "width": 640,
      "height": 640
    }

因此 return 由 API 为这张人像图像编辑的标准分辨率图像是 640 像素正方形,看起来像这样。

由 API 为这张人像图像 return 编辑的低分辨率图像是 320 像素方形,看起来像这样。

最后但并非最不重要的一点是,由 API 编辑的此肖像图像的缩略图是 150 像素方形,看起来像这样。

请注意照片的顶部和底部是如何被裁剪成 640 平方的。如果这是您正在寻找的内容,那么您就可以开始了,您可以在这里停止阅读:)

进一步阅读

如果您还想要原始肖像/风景图像,请继续阅读。视频也在最后评价。

如何获取上传的横向或纵向照片的原始图像?

由于 API return 目前只有 1 组图像,但该站点能够显示原始宽高比图像,我做了一些挖掘,并意识到如果您从方形图片的网址中删除 /c0.135.1080.1080,您将获得原始纵横比大小的未裁剪图片。

保持上面相同的例子:

方形裁剪图像 URL(return编辑者 API) https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/11909195_1715998838621946_791786043_n.jpg

Portrait Image URL(通过修改Square Image URL得到) https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/11909195_1715998838621946_791786043_n.jpg

希望这对您有所帮助。

我猜他们最终会将 API 更新为 return 方形图像和风景、肖像图像媒体类型。

视频呢?

我查看了 post 横向或纵向的视频。对于这些,videos 数组包含原始宽高比的视频,而 images array 包含方形版本的视频 Poster / 缩略图。

示例:这是一个横向视频:https://instagram.com/p/65WW2uzO2f/?taken-by=schwa23

视频文件的 API return 横向分辨率:

  "videos": {
    "low_bandwidth": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1635209236718259_43009002_s.mp4",
      "width": 480,
      "height": 599
    },
    "standard_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1696545230566321_1671523019_n.mp4",
      "width": 640,
      "height": 799
    },
    "low_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/11912667_1635209236718259_43009002_s.mp4",
      "width": 480,
      "height": 599
    }
  }

视频的正方形图片post底图/封面图片。

  "images": {
    "low_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s320x320/e15/11856717_420039798193500_1047568791_n.jpg",
      "width": 320,
      "height": 320
    },
    "thumbnail": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e15/c140.0.360.360/11848988_1472118453090746_1196959304_n.jpg",
      "width": 150,
      "height": 150
    },
    "standard_resolution": {
      "url": "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11856717_420039798193500_1047568791_n.jpg",
      "width": 640,
      "height": 640
    }

因此对于视频,您可以开始使用,因为 images 数组包含方形图像,而 videos 数组包含原始宽高比的实际视频。

据我所知,一切正常,但缩略图不会像 Instagram 应用程序那样被裁剪,您会看到白色边框。

一定有几个我们可以访问的额外图片 url,但我在 api 文档中没有看到任何更新。

我正在使用获取方形图像的技巧:

您使用包含正确裁剪命令的缩略图 url,然后将 150x150 替换为您实际想要的图像大小。

例如,对横向图像缩略图的 api 响应:

    "thumbnail": {
      "url": "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c135.0.810.810/11909312_160908554245117_2021517224_n.jpg",
      "width": 150,
      "height": 150
    }

部分 c135.0.810.810 正在裁剪我们想要保留的正方形,但是 s150x150 太小所以用 s640x640 替换它给我们裁剪的正方形所需尺寸的图像。

如果你想改变这个,你可以尝试使用裁剪命令 - 例如将第一个数字设置为 0 将为您提供左对齐的裁剪图像。

更新。 Instagram 刚刚宣布 API 支持 landscape/portrait 照片。 Blog post

By default, the setting is disabled and the API will continue to return media in the old square format. When enabled, the API will return media in the format it was actually shared, which may be non-square. The ‘thumbnail’ images will not be affected by this setting, and they will continue to be square.

您现在无需更改任何内容,但从 2016 年 6 月 1 日起所有客户将仅以实际共享的格式接收照片和视频。

对于我的集成,我想接收原始图像,所以我在“编辑客户端”仪表板(Instagram 开发应用程序配置)中启用了一个名为迁移的新设置。

我做了一些测试,效果很好。这是 Instagram API:

返回的示例对象
{
    'low_resolution': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e35/p320x320/11849291_1520473841577439_1881145227_n.jpg,
    'standard_resolution': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/sh0.08/e35/p640x640/11849291_1520473841577439_1881145227_n.jpg,
    'thumbnail': Image: https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e35/c0.135.1080.1080/11849291_1520473841577439_1881145227_n.jpg
}