iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 18
0
Modern Web

React + GraphQL 全端練習筆記系列 第 18

仿Trello - 串接Unsplash API

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。

Trello看板有個功能是隨機從Unsplash抓照片,用作看板背景,讓畫面變得美觀,我在專案中也試著仿製這個功能,這篇就筆記些如何使用Unsplash API的要點。

Unsplash Source

Unsplash Source是簡易式的Unsplash API,免費使用,在網址中串上一些簡單的參數就能取得照片連結。

這邊做一個Wallpaper部件,在裡面串Unsplash Source。

import React, { useState, useEffect } from "react";

export default function Wallpaper() {
    return (
        <img
          src="https://source.unsplash.com/1600x900/?nature,water"
          alt=""
          className="wallpaper"
        />
    );
}

用 img 標籤連結 unsplash source,就能顯示圖片。

筆記部分連結裡用的關鍵字:

  • 隨機照片
https://source.unsplash.com/random

如果加上random關鍵字就會取得隨機照片

  • 指定照片大小
https://source.unsplash.com/random/1600x900/

寬x高用來指定照片大小,固定串在最後面。

  • 搜尋主題
https://source.unsplash.com/featured/?nature,water

以featured做結尾後在?後代入的字串用於主題式搜尋,多的主題以逗號分隔。

如果同時指定大小的話就不用featured關鍵字了

https://source.unsplash.com/1600x900/?nature,water
  • 指定特定 id 照片
https://source.unsplash.com/WLUHO9A_xik/1600x900

如果有照片id串在根網址後面就能存取,如果要裁切大小依樣將寬x高串在最後面。

Unsplash API

Unsplash source只能取用部分 Unsplash API的功能,如果需要更多功能,就要辦Unsplash帳號,取得key後才能存取API。

辦好Unsplash帳號後在選單裡找到API頁面:

進頁面後點下大大的 New Application按鈕,答應使用條款後App端口就建立好了,在App頁面裡往下拉可以找到金鑰:

存取API用的是Access Key,這邊先記下來待會用。

unsplash-js

官方提供了一些套件,封裝好fetch照片的方法。

安裝:

npm i --save unsplash-js

除了js以外也有提供Ruby跟其他語言的套件。

套件安裝好後先建立unsplash實例,這裡要提供Access Key。

import Unsplash, { toJson } from "unsplash-js";

const unsplash = new Unsplash({
  accessKey: process.env.REACT_APP_UNSPLASH_ACCESS_KEY,
});

題外話: create-react-app建立的專案,在根目錄加入.env檔後,新建立的環境變數必須以 REACT_APP_ 起頭,不然編譯的時候會被忽略。

取得隨機照片

為了提供背景照片的選擇,這裡隨機搜尋 20 張照片。

unsplash.photos
      .getRandomPhoto({
        count: "20",    //回傳的照片數量,預設 1 ,最高 30
        query: "nature water",  //搜尋字串,用空白隔開
        orientation: "landscape",  //目標照片方向,可用值: landscape (橫向), portrait (縱向), squarish (方形)
      })
      .then(toJson)
      .then((json) => {
        //對json檔的處理
      })

取得的json檔裡有很多資訊,而最重要的莫過於照片連結,urls。

"urls": {
    "raw": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d",
    "full": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg",
    "regular": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg&w=1080&fit=max",
    "small": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg&w=400&fit=max",
    "thumb": "https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg&w=200&fit=max"
  },

API很貼心的提供不同大小、解析度的照片連結,不過如果有不同需求,可以用 raw的連結加上參數自己裁切。

//處理json檔案
const flitteredData = json.map((picData) => ({
          id: picData.id,
          url: `${picData.urls.raw}&fm=jpg&w=800&h=450&fit=min`,
        }));
  • fm: 照片格式
  • w , h: 限制照片寬高
  • fit: 指定照片變形成目標寬高的方法,min會將照片裁切成目標寬高的比例。

其他還有像是

  • crop: 裁切方式,要搭配fit=crop,跟設定w ,h使用
  • q: 壓縮品質, 0 - 100 ,預設 75

以上這些參數目前是以 imgix 的服務支撐,只要 imgix有支援的參數基本都能使用,不過Unsplash文件裡備註未來可能會取消使用imgix。

取得指定照片

當使用者在清單裡選擇了照片後,就用照片的id取得大小符合、解析度高的照片給背景用。

 unsplash.photos.getPhoto(id)
      .then(toJson)
      .then((json) => {
        updateWallpaperUrl(
          `${json.urls.raw}&fm=jpg&w=${window.innerWidth}&h=${window.innerHeight}&fit=min`
        );
      })

到這邊簡單舉例兩個 API的使用方式,Unsplash API還有許多其他功能,可以到文件裡看看。

References:


上一篇
仿Trello - 客製化拖曳圖示
下一篇
GraphQL 簡介
系列文
React + GraphQL 全端練習筆記30

尚未有邦友留言

立即登入留言