1

私の問題は、flickr 検索 (タグ、色、ライセンス) からランダムな画像を取得する必要があることです。flickr api がどのように機能しているかを把握するために 1 日を費やしましたが、html、css、および js の基本的なスキルでは、このことで迷ってしまいます。

私の最後のプロジェクトでは、非常に簡単な unsplash API を使用しました。URL で画像を取得できます。例えば。自分のウェブサイトに犬の写真を埋め込みたい場合は、次のようにするだけです。

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

flickrでそれを行う方法はありますか？おそらくphpで、画像を生成するURLがありますか？flickr api の操作方法に関する非常に簡単なチュートリアルを教えてもらえますか?

前もって感謝します

4

2 に答える 2

0

flickr.photos.search に対してクエリを実行し、返された JSON を使用して、img タグの src 値となる URL を作成します。jQuery.getJSON() を使用してそれを行う方法の例を次に示します。

まず、アプリを登録し、ここでAPI キーを取得する必要があります。

API キーを取得したら、API を検索し、1 つの結果を返し、その結果を 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 に答える