我的问题是我需要从flickr搜索中获取随机图像(标签,颜色,许可证)。我花了一天的时间来尝试了解flickr api的工作方式,但是凭借我在html,css和js方面的基本技能,我对这件事迷失了。

在我的上一个项目中,我使用了unsplash api,它非常简单,URL可为您提供图像。例如。如果要在我的网站中嵌入狗图片,则只需执行以下操作:

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


有没有办法用flickr做到这一点?也许与PHP,有一个生成图像的URL?谁能指出我有关如何使用flickr api的非常简单的教程?

提前致谢

最佳答案

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

首先,您需要注册您的应用并获取API密钥here

拥有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);
        });
});

关于javascript - flickr相当于source.unsplash.com,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36920699/

10-12 16:05