Flickr是雅虎旗下的一家圖片分享網站，擁有龐大的數據圖片資源，幸運的是，它也為開發人員提供了Api接口，使得可以通過使用Api接口就能使用到大量的圖片資源。下面鏈接是其提供的官方Api文檔。

https://www.flickr.com/services/api/

下面使用js寫的一個簡單的圖片搜索應用。使用了flickr提供的一個名為flickr.photos.search的方法，依據其官方文檔提供的url格式，如下：

https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg or https://farm{farm-id}.staticflickr.com/{server-id }/{id}_{secret}_[mstzb].jpg or https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{o-secret}_o.(jpg |gif|png)

以第一個為例，需要獲得四個參數，分別為farm-id,server-id,id,secret,這里需要特別注意的是，我們請求訪問回傳的內容是json格式，如下：

jsonFlickrApi({"photos":{"page":1,"pages":66467,"perpage":5,"total":"332335","photo":[{"id":"25836143290","owner":"139253015@N05","secret":"d1bbf8d41d","server":"1487","farm":2,"title":"Smile","ispublic":1,"isfriend":0,"isfamily":0},{"id":"26016445532","owner":"132193565@N08","secret":"aaa65c778d","server":"1593","farm":2,"title":"Run","ispublic":1,"isfriend":0,"isfamily":0},{"id":"25836085550","owner":"24406007@N05","secret":"4d99856c72","server":"1656","farm":2,"title":"","ispublic":1,"isfriend":0,"isfamily":0},{"id":"26016393512","owner":"128056224@N03","secret":"a452c7fac6","server":"1494","farm":2,"title":"_04_5372-Modifica","ispublic":1,"isfriend":0,"isfamily":0},{"id":"26108884765","owner":"128056224@N03","secret":"d6383a61c6","server":"1449","farm":2,"title":"_04_5372-2","ispublic":1,"isfriend":0,"isfamily":0}]},"stat":"ok"})

仔細分析以上內容，看來photos里面包含了需要的全部內容，在仔細往下看，需要的內容在photo的屬性里面，特別說明一點，使用jQuery里面的$.getJSON()方法獲得的是json對象而非字符串。當獲取到回傳的對象data是，根據以上分析，我們可以得出需要的屬性分別為data.photos.photo.farm;data.photos.photo.server…(就不一一列舉了)；好到了這一步圖片的url地址已經清晰，現在需要做的是就是把圖片搜索給搞出來。

查閱flickr.method.search方法的參數說明，以下鏈接

https://www.flickr.com/services/api/flickr.photos.search.html

得出圖片搜索是根據標簽屬性，tags來搜索，因此只需要把tags拼接到url中就可以了，當然，如果你有興趣開發更有趣的圖片搜索，也可以自己找出更多的屬性來玩，該方法的屬性多達幾十個。
下面是博主寫的js代碼

``$(function (){$("#sub").click(function (){$("#get").empty();var search_word = $("#search_word").val();var search_num = "per_page="+$("#search_number").val(); //url訪問 $.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=ffd0006240c83a54d0148d665b6ea76d&tags=" + $("#search_word").val() + "&tag_mode=all&media=&in_gallery=&"+search_num+"&format=json&jsoncallback=?", function (data) {//var obj = eval("(" + data + ")")//var obj2 = JSON.parse(data);$.each(data.photos.photo, function (i,photo){//這邊是圖片src屬性的拼接$("<img class='para'>").attr("src", "https://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id +"_"+photo.secret+ ".jpg").appendTo("#get")})})})})``

至此圖片搜索已經完成，最后效果圖如下

總結

以上是生活随笔為你收集整理的基于Flickr的图片搜索的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。