images.Padding

New in v0.120.0

最後一個參數是畫布顏色，以 RGB 或 RGBA 十六進制顏色 表示，預設值為 ffffffff（不透明的白色）。前面的參數是邊距值，單位為像素，並使用 CSS 縮寫屬性語法。負值邊距將會裁剪影像。

使用方法

創建濾鏡：

{{ $filter := images.Padding 20 40 "#976941" }}

使用 images.Filter 函數應用過濾器：

{{ with resources.Get "images/original.jpg" }}
  {{ with . | images.Filter $filter }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

您也可以使用 Resource 物件上的 Filter 方法來應用過濾器：

{{ with resources.Get "images/original.jpg" }}
  {{ with .Filter $filter }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

可以與 Colors 方法結合使用，為影像加上其中一個最主要的顏色作為邊框：

{{ with resources.Get "images/original.jpg" }}
  {{ $filter := images.Padding 20 40 (index .Colors 2) }}
  {{ with . | images.Filter $filter }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

範例

Original

錫安國家公園

Processed

錫安國家公園

其他範例

這個範例會將影像調整為 300px 寬，轉換為 WebP 格式，並增加 20px 垂直邊距和 50px 水平邊距，再設置畫布顏色為帶有 33% 不透明度的深綠色。

轉換為 WebP 格式是必要的，因為只有 PNG 和 WebP 支援透明度。PNG 和 WebP 圖片有 Alpha 通道，而 JPEG 和 GIF 則沒有。

{{ $img := resources.Get "images/a.jpg" }}
{{ $filters := slice
  (images.Process "resize 300x webp")
  (images.Padding 20 50 "#0705")
}}
{{ $img = $img.Filter $filters }}

要將影像邊框設為 2px 灰色邊框：

{{ $img = $img.Filter (images.Padding 2 "#777") }}
images.Pixelate images.Overlay