1

我的问题是我需要从 flickr 搜索中获取随机图像（标签、颜色、许可证）。我花了一天时间试图了解 flickr api 是如何工作的，但是凭借我对 html、css 和 js 的基本技能，我迷失了这个东西。

在我的上一个项目中，我使用了超级简单的 unsplash api，一个 url 可以为你提供一张图片。例如。如果我想在我的网站中嵌入一张狗图片，我只需要这样做：

<img src="https://source.unsplash.com/featured/?{dog}">

有没有办法用 flickr 做到这一点？也许使用 php，有一个生成图像的 url？谁能指点我一个关于如何使用 flickr api 的非常简单的教程？

提前致谢

4

2 回答 2

1

首先，您需要从App Garden获取秘密的开发者密钥

接下来，既然您已经声明您有兴趣执行搜索，请查看API 文档。您将在左侧看到几个“工具包”，在右侧看到“API 方法”。在 photos 方法下，您可以看到flickr.photos.search，它解释了您可以传递给 API 的参数、期望的响应类型等……太好了，所以现在我们只需要一些示例代码。

我在 Google 上搜索“flickr search php example”并遇到了这个教程。为了您的方便，下面提供了此页面中的代码，我在本地进行了测试以确认它确实有效：

<?php

$api_key = 'your api secret key';

$tag = 'flower,bird,peacock';
$perPage = 25;
$url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search';
$url.= '&api_key='.$api_key;
$url.= '&tags='.$tag;
$url.= '&per_page='.$perPage;
$url.= '&format=json';
$url.= '&nojsoncallback=1';

$response = json_decode(file_get_contents($url));
$photo_array = $response->photos->photo;

foreach ($photo_array as $single_photo) {
    $farm_id = $single_photo->farm;
    $server_id = $single_photo->server;
    $photo_id = $single_photo->id;
    $secret_id = $single_photo->secret;
    $size = 'm';
    $title = $single_photo->title;
    $photo_url = 'http://farm'.$farm_id.'.staticflickr.com/'.$server_id.'/'.$photo_id.'_'.$secret_id.'_'.$size.'.'.'jpg';
    print "<img title='".$title."' src='".$photo_url."' />";
}

希望这可以帮助您入门。或者，您可以获取上面提到的工具包之一并使用它来查看更多示例。

于 2016-04-28T17:55:51.397 回答
0

我会查询flickr.photos.search并使用返回的 JSON 来构建将作为 img 标签的 src 值的 URL。这是一个如何使用 jQuery.getJSON() 的示例。

首先，您需要在此处注册您的应用并获取 API 密钥。

获得 API 密钥后，这里有一个基本演示，说明如何搜索 API、返回一个结果并在 img 标签中显示结果。为了简单起见，目前唯一的错误处理是获取 JSON 失败。请注意，该演示需要 jQuery：

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Basic Flickr Image Search</title>
</head>

<body>
    <label for="query">Search Flickr:</label>
        <input id="query" type="text" placeholder="Dog">
        <input id="submit" type="submit">

    <div id="container"></div>
    <script src="jquery.min.js"></script>
    <script src="app.js"></script>
</body>

</html>

JavaScript (app.js)

var query = $('#query');
var submit = $('#submit');
var container = $('#container');

submit.click(function() {

    // Clear the previously displayed pic (if any)
    container.empty();

    // build URL for the Flickr API request
    var requestString = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=";

    // Replace XXXXXXXX with your API Key
    requestString += "XXXXXXXX";

    requestString += "&text=";

    requestString += encodeURIComponent(query.val());

    requestString += "&sort=relevance&media=photos&content_type=1&format=json&nojsoncallback=1&page=1&per_page=1";

    // make API request and receive a JSON as a response
    $.getJSON(requestString)
        .done(function(json) {

            // build URL based on returned JSON
            // See this site for JSON format info: https://www.flickr.com/services/api/flickr.photos.search.html
            var URL = "https://farm" + json.photos.photo[0].farm + ".staticflickr.com/" + json.photos.photo[0].server;
            URL += "/" + json.photos.photo[0].id + "_" + json.photos.photo[0].secret + ".jpg";

            // build the img tag
            var imgTag = '<img id="pic" src="' + URL + '">';

            // display the img tag
            container.append(imgTag);
        })
        .fail(function(jqxhr) {
            alert("Sorry, there was an error getting pictures from Flickr.");
            console.log("Error getting pictures from Flickr");
            //write the returned object to console
            console.log(jqxhr);
        });
});
于 2016-04-28T18:37:01.213 回答