javascript - 使用 rottentomatoes API 获取大小合适的图片

Question

我使用的是烂番茄 API，它相当简单。以下是我的基本代码:

var apikey = "xxxxx";

function queryForMovie(query) {
  queryUrl = "http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=" + apikey + "&q=" + encodeURI(query);
  $.ajax({
    url: queryUrl,
    dataType: "jsonp",
    success: queryCallback
  });
}

function queryCallback(data) {
  var el = $('#movie-listings');
  $.each(data.movies, function(index, movie) {
    el.append('img src="' + movie.posters.original + '" alt="' + movie.title + '"');
  })
};

$(document).on("load", queryForMovie("Star Wars"));

但是，这会返回一个非常小的图像。

什么是获得更大尺寸图像的好方法，同时尽可能限制请求？

Answer 1

** 更新 **

Rotten Tomatoes 已进行配置更改，因此尝试直接引用云端 URL 不再有效。因此，此解决方案不再有效。

这就是使用未经批准的解决方法的危险。

有人知道有什么好的电影海报服务吗？

---

原始不工作答案:

即使 Rotten Tomatoes API 在电影海报对象中列出了四个单独的图像(thumbnail、profile、detailed 和 original)，它们目前都是相同的 URL:

"posters": {
    "thumbnail": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg",
    "profile": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg",
    "detailed": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg",
    "original": "http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg"
}

根据转发， high-resolution poster images are no longer available via the APIs 保持关注评分和评论，更详细的内容。

但是，如果您愿意“关闭菜单”，您仍然可以获得全分辨率图像。/54x80/之后的海报图片网址部分是原始图片的云端网址:

http://resizing.flixster.com/AhKHxRwazY3brMINzfbnx-A8T9c=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg

...成为...

http://dkpu1ddg7pbsk.cloudfront.net/movie/11/13/43/11134356_ori.jpg

一个 javascript 实现可能看起来像这样:

// movie = RT API movie object
var original = movie.posters.original.replace(/^.*?\/[\d]+x[\d]+\//,"http://");

该图像通常比 54x80 大得多，加载和显示这些图像的大列表可能不可行。尝试修改 url resizing.flixster.com url 不起作用——似乎涉及某种依赖于资源的哈希。如果您希望能够缩小图像，则需要设置或寻找图像代理服务。我发现 Pete Warden 关于 resizing and caching images with cloudfront 的文章会有很大的帮助。

使用他在文章中设置的服务的示例可能类似于 http://imageproxy.herokuapp.com/convert/resize/200x285/source/http%3A%2F%2Fdkpu1ddg7pbsk.cloudfront.net%2Fmovie%2F11%2F13%2F43%2F11134356_ori.jpg

在 javascript 中，这看起来像:

// Match url: http://[some.kind/of/url/[height]x[width]/[original.cloudfront/url]
var url_parts = movie.posters.original.match(/^.*?\/([\d]+)x([\d]+)\/(.*)/);

var ratio = url_parts[1] / url_parts[2], // Determine the original image aspect ratio from the resize url
    size = 200, // This is the final width of image (height is determined with the ratio)
    original = "http://" + url_parts[3],
    wxh = [size, Math.round(size/ratio)].join("x");

// Construct the final image url
movie.posters.original = [
    "http://imageproxy.herokuapp.com/convert/resize/",
    wxh,
    "/source/",
    encodeURIComponent(original)
].join("");

// The first request of this URL will take some time, as the original image will likely need to be scaled to the new size.  Subsequent requests (from any browser) should be much quicker, so long as the image remains cached.

注意:做这样的事情取决于烂番茄保持他们的调整大小 url 相同的形式(调整大小 url + [宽度]x[高度] + 编码的云端 url)。除非您设置自己的图像代理服务，否则就正常运行时间、性能、安全性和图像质量而言，您也将受到代理所有者的摆布。