網址結構

本站是以 Fake images please? 的基礎下，加入大量功能擴充。

說明太複雜？可直接跳去看 常用範例 。

https://fimg.yuaner.tw/300x200/bg/2x3/5/3/A5D0E5/ph/ff0000,128/000,255/?text=Hello+World&filetype=svg

基本上分為四大部份：

  • [畫布大小]： 直接定義整張圖片最大的大小，以px為單位。選填：若不填寫將會以主內容來決定這張圖的大小。
  • [邊緣背景]： 基本上是/bg/...開頭，可設定邊緣間距與背景顏色陰影。選填：若不填寫將會以主內容佔據整張圖。
  • [主內容]： 設定主要內容的顏色、文字內容。目前僅提供ph(PlaceHolder)類型。
  • [額外設定]： 可設定 filetype=[svg|png]、scale=2、debug=1

參數說明

大小相關

適用於：padding、shadow、radius 的部份

  • [int]：會當作整個畫布的%比例來處理
  • [int]p：會直接以px為單位

適用於canvas-size、size、pagging的部份

  • [int]x[int]：
  • [int]px[int]p：

Color 顏色

  • Hex 代碼（例：ff0000）
  • Hex+Alpha（例：ff0000,128 代表 50% 透明度）。
  • 背景圖片id （例：tpl(drool-l)）

URL Query 參數

  • 適用於主內容ph(PlaceHolder)類型
    • text：自訂文字內容。
    • font：字體名稱（huninn、noto 等）。
  • 共通可用參數
    • scale=2：設為 2 時使用 2x 像素密度。
      • retina=1：等同於scale=2，設為 1 時使用 2x 像素密度。
    • filetype=png：控制輸出檔案格式，目前支援 svg、png、ico，預設以svg為主。
    • debug=1：以右下浮水印形式顯示已帶入參數與處理是哪個站台處理的

基本用法（PlaceHolder = ph）

https://fimg.yuaner.tw/[size]/[bgcolor]/[fgcolor]/?text=[text]&filetype=[svg|png]

加上邊緣背景 (Background = bg, PlaceHolder = ph)

https://fimg.yuaner.tw/bg/[bg-padding]/[bg-shadow]/[bg-radius]/[bg-bgcolor]/ph/[size]/[bgcolor]/[fgcolor]/?text=[text]&filetype=[svg|png]

以基本用法為基礎，

先決定畫布大小，再決定內容

https://fimg.yuaner.tw/[canvas-size]/bg/[bg-padding]/[bg-shadow]/[bg-radius]/[bg-bgcolor]/ph/[bgcolor]/[fgcolor]/?text=[text]&filetype=[svg|png]

若你的需求是圖檔大小就要固定下來，可直接把大小寫在最前段。

常用範例

<h3>一般預留圖</h3>
<img src="https://fimg.yuaner.tw/300x200.svg">

<h3>自訂文案預留圖</h3>
<img src="https://fimg.yuaner.tw/400x200?text=🖼️預留圖😉&filetype=png">

<h3>自訂背景色與文字顏色的預留圖</h3>
<img src="https://fimg.yuaner.tw/400x200/ff0000/FFF/?text=I am red.">

<h3>帶有帶有陰影的透明邊緣的預留圖 (bg=Background ph=PlaceHolder)</h3>
<img src="https://fimg.yuaner.tw/300x200/bg/5/10/ph.svg">

<h3>帶有帶有圓角陰影的圖案邊緣的預留圖</h3>
<img src="https://fimg.yuaner.tw/300x200/bg/5/10/4/tpl(drool-l)/ph.svg">

相容 Fake images please? 用法範例

  • https://fimg.yuaner.tw/300/
  • https://fimg.yuaner.tw/250x100/
  • https://fimg.yuaner.tw/250x100/ff0000/
  • https://fimg.yuaner.tw/350x200/ff0000/000
  • https://fimg.yuaner.tw/350x200/ff0000,128/000,255
  • https://fimg.yuaner.tw/350x200/?text=Hello
  • https://fimg.yuaner.tw/200x100/?retina=1&text=こんにちは&font=noto
  • https://fimg.yuaner.tw/350x200/?text=World&font=lobster
  • https://fimg.yuaner.tw/440x230/ff0000,128/000,255/?retina=1&text=Problem?%20%3C%3Apepw%3A989410572514758676%3E
fakeimg.pl
fakeimg.pl
fakeimg.pl
fakeimg.pl