flickr equivalent to source.unsplash.com


flickr equivalent to source.unsplash.com

我的问题是,我需要从flickr搜索中获得一个随机图像(标签、颜色、许可证)。我花了一天时间试图了解flickrAPI是如何工作的,但由于我掌握了html、css和js的基本技能,我对这件事感到困惑。

在我的上一个项目中,我使用了unsplashapi,它非常简单,一个url可以给你一个图像。例如如果我想在我的网站上嵌入一张狗的照片,我只需要这样做:

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

有没有办法用flickr做到这一点?也许使用php,有一个生成图像的url?有人能给我介绍一下如何使用flickrAPI的简单教程吗?

提前感谢

首先,您需要从AppGarden 获得一个秘密的开发人员密钥

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

我在谷歌上搜索了"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."' />";
}

希望这能帮助你开始。或者,您可以获取上面提到的一个工具包,并使用它来查看进一步的示例。

我会查询flickr.photos.search,并使用返回的JSON来构建URL,该URL将是img标记的src值。下面是一个如何使用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);
        });
});