javascript — эквивалент Flickr для source.unsplash.com

Моя проблема в том, что мне нужно получить случайное изображение из поиска Flickr (тег, цвет, лицензия). Я провел день, пытаясь понять, как работает flickr api, но с моими базовыми навыками работы с html, css и js я заблудился с этой штукой.

Для моего последнего проекта я использовал API-интерфейс unsplash, который очень прост, URL-адрес дает вам изображение. Например. Если я хочу добавить фотографию собаки на мой сайт, я просто должен сделать это:

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

Есть ли способ сделать это с помощью Flickr? Может быть, с php, есть URL, который генерирует изображение? Может ли кто-нибудь указать мне на очень простое руководство по работе с flickr api?

заранее спасибо

1

Решение

Я бы запросил flickr.photos.search и используйте возвращенный JSON для построения URL, который будет значением src тега img. Вот пример, если как сделать это с помощью 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);
});
});
0

Другие решения

Прежде всего, вам нужно получить секретный ключ разработчика от App Garden

Далее, поскольку вы заявили, что заинтересованы в поиске, посмотрите на API документация. Вы увидите несколько «наборов» слева и «методы API» справа. Под методом фотографии вы можете увидеть flickr.photos.search, который объясняет аргументы, которые вы можете передать API, какой тип ответа ожидать и т. д. Отлично, так что теперь нам просто нужен пример кода.

Я искал в Google «пример phpr search php» и наткнулся на этот урок. Код для этой страницы приведен ниже для вашего удобства, и я проверил локально, чтобы убедиться, что он действительно работает:

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

Надеюсь, это поможет вам начать. Кроме того, вы можете взять один из упомянутых выше наборов и использовать его, чтобы увидеть дополнительные примеры.

1

По вопросам рекламы [email protected]