超實用！前端(網頁)開發小工具：假文、假圖與AI臉孔

1. 隨機圖片(假圖)API

網址：https://picsum.photos/

1. 正方形圖片：https://picsum.photos/寬
2. 矩形圖片：https://picsum.photos/寬/高
3. 確保取到不同的圖：附加 ?random=數字
4. 取灰階圖：附加 ?grayscale
5. 模糊化：附加 ?blur

2. AI臉孔(假臉)API

網址：https://generated.photos/
需要申請API Key，免費版每月只能調用50次

2.1. 網址選項

• 說明：https://generated.photos/account#apikey

2.2. API使用範例

<script>
  async function getFace() {
    // gender=female
    let response = await fetch("https://api.generated.photos/api/v1/faces?api_key=申請的Key&per_page=3&order_by=random", {
      method: "GET"
    });
    let result = await response.json();
    document.getElementById("img1").src = result.faces[0].urls[4]["512"];
    document.getElementById("img2").src = result.faces[1].urls[4]["512"];
    document.getElementById("img3").src = result.faces[2].urls[4]["512"];
  }

  getFace();
</script>

3. 免費AI臉孔網站與API

網站：https://100k-faces.glitch.me/
說明：ozgrozer/100k-faces: API for 100,000 AI generated faces
圖片來源：https://generated.photos

3.1. 使用方法

1. 直接存取隨機圖片 /random-image

<img src="https://100k-faces.glitch.me/random-image" />

1. 取回帶有圖片網址的JSON回應: https://100k-faces.glitch.me/random-image-url

{"url":"https://ozgrozer.github.io/100k-faces/0/1/001343.jpg"}

4. 免費臉孔網站與API

網址: https://randomuser.me/
說明: https://randomuser.me/documentation#howto

4.1. 網址選項

<script>
  async function getFace() {
    // gender=female
    let response = await fetch("https://randomuser.me/api/?results=3", {
      method: "GET"
    });
    let result = await response.json();
    document.getElementById("img1").src = result.results[0].picture.medium;
    document.getElementById("img2").src = result.results[1].picture.medium;
    document.getElementById("img3").src = result.results[2].picture.medium;
  }

  getFace();
</script>

5. SVG圖示

網址: https://heroicons.dev

免費的SVG圖片，方便製作按鈕的圖示。

6. 中英文假字、文章產生器

網址: http://www.richyli.com/tool/loremipsum/

• MoreText.js: 一用就愛上的中文假文產生器
• 中文假文產生器
• 中文假字生成器 | Chinese Lorem ipsum Generator
• 唬爛產生器

7. 教學影片

＃＃您可能也會有興趣的類似文章

• 把網路空間當成本機資料夾：Gladinet (2則留言, 2009/01/04)
• 初試AJAX：中文的傳遞與接收 (0則留言, 2007/03/16)
• IE和FireFox存取同名物件有不同的作法 (0則留言, 2007/04/08)
• [Obs＃27] Timelines：時間軸外掛 (0則留言, 2021/03/12)
• 將IE網頁轉換成FireFox也能執行 (0則留言, 2007/02/28)
• 撰寫API規格文件的利器：API Blueprint與aglio (2則留言, 2016/12/14)
• [Blog] 在文章底部隨機顯示相關文章的功能說明 (6則留言, 2007/04/26)
• 幫Trac加上TiddlyWiki的雙擊快速編輯功能 (0則留言, 2007/08/10)
• 事件處理程式與物件的順序對FireFox很重要 (0則留言, 2007/03/02)
• [Database] Aqua Data Studio 4.0.2推出 (0則留言, 2005/02/23)
• 網頁程式碼美化程式 Google Code Prettify (0則留言, 2007/05/27)
• 自動填Google搜尋的輸入字串：Xuite自動書籤按鈕 V1.4 (9則留言, 2007/03/13)
• Google Reader快速訂閱的FireFox擴充 (2則留言, 2007/06/16)
• [Obs＃51] QuickAdd全攻略(2)：腳本撰寫與巨集使用要點 (0則留言, 2021/09/18)
• 使用Inno Setup包裝安裝程式的備忘 (2則留言, 2014/03/21)