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

佔位圖片就是當我們在設計版面的時候,規劃出一個區塊要來放置內容,但此時裡面並沒有真正的圖片或內容,這時候佔位器就可以幫上忙,在溝通上可以更容易看出這裡有一塊版面,也不用開小畫家自己放圖進去,大部份使用上只要在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

網址連結:http://placehold.jp/en.html

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

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

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

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

  1. 產生綠色文字,且大小為 200 x 200 的圖片
    http://placehold.jp/00ff00/200×200.png
  2. 產生綠色文字、紅色背景,且大小為 200 x 200 的圖片
    http://placehold.jp/00ff00/200×200.png
  3. 產生綠色文字、紅色背景,且大小為 200 x 200 的圖片
    http://placehold.jp/60/ff0000/00ff00/200×200.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"}

Lorem Picsum

網址連結:https://picsum.photos/

基本使用
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看看喔!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *