flickr 相当于 source.unsplash.com

Question

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

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

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

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

提前致谢

Answer 1

首先，您需要从 App Garden

获取开发者秘钥

接下来，既然您已经声明您有兴趣执行搜索，请查看 API documentation. You will see several "kits" on the left, and "API methods" on the right. Under the photos method you can see flickr.photos.search，它解释了您可以传递给 API 的参数，以及对什么类型的响应expect 等...很好，所以现在我们只需要一些示例代码。

我在 Google 中搜索了 "flickr search php example" 并找到了 this tutorial。为方便起见，下面提供了此页面中的代码，我在本地进行了测试以确认它确实有效：

<?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."' />";
}

希望这可以帮助您入门。或者，您可以获取上述套件之一并使用它来查看更多示例。

Answer 2

我会查询 flickr.photos.search 并使用 returned JSON 构建 URL ，这将是 img 标签的 src 值。这是一个示例，说明如何使用 jQuery.getJSON().

首先，您需要注册您的应用程序并获得一个 API 密钥 here。

获得 API 键后，下面是一个基本演示，介绍如何搜索 API、return 一个结果，并将结果显示在 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);
        });
});

flickr 相当于 source.unsplash.com

flickr equivalent to source.unsplash.com

javascript

php

flickr

phpflickr