iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
1

Unsplash 是一個免費的圖庫,由於他們提供的圖片特別漂亮又提供各種大小,非常受到大家的歡迎。許多網路文章的配圖或是網頁 template 裡面都會使用 Unsplash 的圖片。

Unsplash 直到今年 11 月才推出了官方的 API ,一如他們的免費、開源的理念,這個 API 也是免費的,甚至沒有計算使用的 Rate。當然,使用 API 的時候也必須遵守他們的規範,比方說不能建一個跟 Unsplash 本身核心一樣的圖片下載服務還有必須註明圖片作者跟來源等。

在 Unsplash 首頁 navigation bar 上的 ··· 按鈕裡找到 API/Developers ,就到了 API 頁面

API 首頁上面有個小小的 Your applications 按鈕,點進去可以申請 Application IDSecret

在這邊 Unsplash 為了確保大家都能遵守 API Guidelines ,一開始的 API 請求數量會受到限制。如果想要撤除限制,他會要求你截圖給他們看,證明你有使用 UTM tracking 以及註明圖片來自 Unsplash 以及 Unsplash 的攝影師們。

現在來看看文件:

Unsplash API 也是相當簡單(畢竟本身就是個簡單的服務呀),使用 API 的人可以取得一下資訊:

  • 使用者
  • 圖片
  • 搜尋 Unsplash 資料庫
  • 圖集

其中最常遇到的大概就是獲取圖片了吧,比方說,在自己的 App 裡面載入最新的 Unsplash 圖片之類的。
所以我今天也是寫抓圖片的功能。

抓圖的 Request URL 後面接的是 /photos/ ,可以放入以下參數:

  • page 頁數 :抓取 Unsplash 第幾頁的參數,預設是第一頁

  • per_page 每頁圖片數量:預設是 10 張

  • order_by:可以依照 latestoldestpopular 數值排列圖片

    // API Call Request URL 如下

    var url =
    "https://api.unsplash.com/photos/" +
    "?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a" +
    "&per_page=30";

來實作看看:

var url =
  "https://api.unsplash.com/photos/?client_id=812193ef71ca946e361ed541979a0cfd91e9419a19235fd05f51ea14233f020a&per_page=30";

var utm = "&utm_source=Photo-app&utm_medium=referral";

var container = document.querySelector("#container");
function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response)
    }
  };
  xhr.open("GET", url, true);

  xhr.send();
}
makeRequest();

順利的得到一個 Array

現在改寫 xhr.onload 裡的 function,把 array 裡面的圖片物件 loop 出來:

  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response)
    for (var i = 0; i < response.length; i++) {
        var img = document.createElement("img");
        img.setAttribute("src", response[i].urls.small);
        container.appendChild(img);
    };

由於我只想要直的圖片,做了以下改寫:

      if (response[i].height > response[i].width) {
        var img = document.createElement("img");
        img.setAttribute("src", response[i].urls.thumb + utm);
        container.appendChild(img);
      }

最後在 <style> 裡面 給 #container 一個 display: flex; 把圖片排一下。
(非常難得的碰了 CSS)

成果:

Codepen Demo


上一篇
[30apis] Day 4 : News API
下一篇
[30apis] Day 6 : Fixer API (匯率轉換)
系列文
我每天都接一個API30

尚未有邦友留言

立即登入留言