flickr相當於source.unsplash.com

我的問題是我需要從flickr搜索（標籤，顏色，許可證）中獲得一個隨機圖像。我花了一天的時間試圖弄清楚flickr api是如何工作的，但是我用html，css和js的基本技能讓我失去了這個東西。flickr相當於source.unsplash.com

對於我的最後一個項目，我使用了非常容易的unsplash api，一個url爲您提供了一個圖像。例如。如果我想嵌入在我的網站狗的圖片，我只是要做到這一點：

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

有沒有辦法做到這一點與Flickr？也許與PHP，有一個網址，生成圖像？任何人都可以給我一個關於如何使用flickr api的簡單教程嗎？

在此先感謝

來源

2016-04-28 youpielove

我會查詢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); 
     }); 
});

來源

2016-04-28 18:37:01 plr108

謝謝！對我來說很好的答案，因爲我目前正在學習jQuery，所以我可以進入該代碼並進行更改...猜對方的答案也是有效的，但我現在不知道PHP。驚人！ – youpielove

首先，你需要得到來自App Garden

下祕密開發的關鍵，因爲你說你有興趣進行搜索，看看API documentation 。您將在左側看到幾個「套件」，在右側看到「API方法」。在照片方法下，您可以看到flickr.photos.search，它解釋了您可以傳遞給API的參數，期望的響應類型等等。很好，現在我們只需要一些示例代碼。

我搜索谷歌搜索「flickr搜索php示例」，並遇到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."' />"; 
}

希望這可以幫助您開始。或者，您可以抓住上面提到的一個套件，並使用它來查看更多示例。

來源

2016-04-28 17:55:51

flickr相當於source.unsplash.com

回答

相關問題