方便的佔位圖片產生器 – Placemat、Placehold.jp、Lorem Picsum

作者: 黃小蛙 · 最後更新 2023-02-14 · 發表於 2018-11-23 · 網頁前端 / 技術相關

佔位圖片就是當我們在設計版面的時候，規劃出一個區塊要來放置內容，但此時裡面並沒有真正的圖片或內容，這時候佔位器就可以幫上忙，在溝通上可以更容易看出這裡有一塊版面，也不用開小畫家自己放圖進去，大部份使用上只要在img標籤的src指定該位址即可。

Placemat

網址連結：https://placem.at/ (連結已失效)

Placemat 主要提供三個類別的圖片，分別是

以人物為主體的圖片：https://placem.at/people
以風景為主體的圖片：https://placem.at/places
以東西為主體的圖片：https://placem.at/things

讓使用者可以依自己需求取得不同類型的圖片，除了這三類圖片外，還有其他的參數設定，這邊列幾個小蛙有用到的：

w -> 寬度
https://placem.at/people?w=300
取得以人為主體，並且寬度為 300px 的照片
h -> 高度
https://placem.at/places?h=300
取得以人為主體，並且高度為 300px 的照片
random -> 隨機
https://placem.at/people?w=300&h=300&random=hello
隨機取得以人為主體，並且寬度為 300px 高度 300px 的照片，預設如果有給寬或高的參數，只會回傳一模一樣的，所以必須靠random來控制隨機
txt -> 產生的圖片上放置文字
https://placem.at/people?w=400&txt=嗨
取得以人為主體 300 x 300 的圖片，並在圖片上印出「嗨」的字樣
txtclr -> 文字顏色
https://placem.at/people?txtclr=fff&w=300&h=300
隨機取得以人為主體，大小為 300 x 300 的圖片，並設定顏色為白色(fff)，預設值為BFFF，可接受RGB(三個數值)、ARGB(四個數值)或是AARRGGBB(八個數值)，小蛙在這邊不希望出現 300 x 300 的字樣，因此只要 A 的部份設定成 0 就可以產生沒有文字的圖片，例如：ffff。
overlay_color -> 遮罩顏色
https://placem.at/people?overlay_color=ffffffff
隨機取得以人為主體，並設定遮罩顏色為透明(ffffffff)，預設值為ACACAC，可接受RGB(三個數值)、RRGGBB(六個數值)或是AARRGGBB(八個數值)，小蛙一開始覺得怎麼圖片顏色暗暗的，改成ffffffff就可以取得比較亮的圖片了。

更詳細的說明就請連到 Placemat 官網去看囉！

Placehold.jp 產生的佔位圖是我們最常見的單純色塊 + 區塊大小的文字，(大家看起來是圓角，但那是 CSS 處理過的，原始的是直角喔)

Placehold.jp 的使用方式也非常簡單，除了可以自己設定大小之外，網站也提供了常用的大小區塊直接選擇，如同 Placemat 一樣也可以接受直接透過參數的方式來產生佔位圖，參數設定如下：

http://placehold.jp/{字體顏色}/{寬度}x{高度}.png
http://placehold.jp/{背景顏色}/{字體顏色}/{寬度}x{高度}.png
http://placehold.jp/{字體大小}/{背景顏色}/{字體顏色}/{寬度}x{高度}.png

如果有其他的需求，依照上面的取圖方式填入對應的數值，例如：

Placehold.jp 也支援 jpg 及 png 格式的輸出

http://placehold.jp/200x200.png
http://placehold.jp/200x200.jpg

可以加入自己想要的文字

http://placehold.jp/30/999999/ff0000/200x100.png?text=專業偽筆記

最後，還有最後一個功能還蠻有趣的，Placehold.jp 可以透過 css 來做到圓角

http://placehold.jp/300x300.png?css={"border-radius":"15px"}

基本使用
https://picsum.photos/{寬度}/{高度}
https://picsum.photos/{大小}

產生 300 x 200 的圖片
https://picsum.photos/300/200

產生 300 x 300 的方形圖片
https://picsum.photos/300

隨機產生圖片
https://picsum.photos/200/300/?random

灰階圖片
https://picsum.photos/g/200/300

批次產生圖片以 json 回傳
https://picsum.photos/list

還有其他更多詳細用法可以直接到Lorem Picsum看看喔！