Image processing

January 1, 1

Image resources

處理圖像時，您必須將文件作為頁面資源、全域資源或遠端資源進行存取。

Page resource

頁面資源是位於 [頁面束](page bundle) 內的文件。頁面束是目錄根目錄內包含 index.md 或 _index.md 文件的結構。

content/
└── posts/
    └── post-1/           <-- 頁面束
        ├── index.md
        └── sunset.jpg    <-- 頁面資源

存取圖像作為頁面資源的方法如下：

{{ $image := .Resources.Get "sunset.jpg" }}

Global resource

全域資源是位於 assets 目錄中的文件，或掛載至 assets 目錄的任何目錄內的文件。

assets/
└── images/
    └── sunset.jpg    <-- 全域資源

存取圖像作為全域資源的方法如下：

{{ $image := resources.Get "images/sunset.jpg" }}

Remote resource

遠端資源是位於遠端伺服器上的文件，可通過 HTTP 或 HTTPS 存取。存取圖像作為遠端資源的方法如下：

{{ $image := resources.GetRemote "https://gohugo.io/img/hugo-logo.png" }}

Image rendering

當您將圖像作為資源存取後，可在模板中使用 Permalink、RelPermalink、Width 和 Height 屬性進行渲染。

範例 1：當資源未找到時拋出錯誤。

{{ $image := .Resources.GetMatch "sunset.jpg" }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">

範例 2：當資源未找到時，跳過圖像渲染。

{{ $image := .Resources.GetMatch "sunset.jpg" }}
{{ with $image }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

範例 3：更簡潔地處理未找到資源時的渲染跳過。

{{ with .Resources.GetMatch "sunset.jpg" }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}

範例 4：若無法存取遠端資源則跳過渲染。

{{ $u := "https://gohugo.io/img/hugo-logo.png" }}
{{ with resources.GetRemote $u }}
  {{ with .Err }}
    {{ errorf "%s" . }}
  {{ else }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }}
{{ else }}
  {{ errorf "Unable to get remote resource %q" $u }}
{{ end }}

Image processing methods

image 資源實現了 [Process]、[Resize]、[Fit]、[Fill]、[Crop]、[Filter]、[Colors] 和 [Exif] 方法。

Process

New in v0.119.0

Process 依據指定規範處理圖像，規範可以包含 resize、crop、fit 或 fill 的選擇性動作。這意味著，您可以使用此方法替代 [Resize]、[Fit]、[Fill] 或 [Crop]。

可用選項參見 Options。

此外，還可以使用此方法應用無需縮放的圖像處理，例如格式轉換：

{{/* 將圖像從 JPG 轉換為 PNG。 */}}
{{ $png := $jpg.Process "png" }}

其他範例如下：

{{/* 圖像逆時針旋轉 90 度。 */}}
{{ $image := $image.Process "r90" }}

{{/* 縮放操作。 */}}
{{ $image := $image.Process "resize 600x" }}
{{ $image := $image.Process "crop 600x400" }}
{{ $image := $image.Process "fit 600x400" }}
{{ $image := $image.Process "fill 600x400" }}

Resize

Resize 將圖像調整為指定的寬度和/或高度。

如果同時指定寬度和高度，但原始圖像的縱橫比不同，則結果圖像將不成比例地縮放。

{{/* 將寬度調整為 600 像素，保持縱橫比不變。 */}}
{{ $image := $image.Resize "600x" }}

{{/* 將高度調整為 400 像素，保持縱橫比不變。 */}}
{{ $image := $image.Resize "x400" }}

{{/* 同時調整寬度為 600 像素，高度為 400 像素。 */}}
{{ $image := $image.Resize "600x400" }}

Fit

Fit 會將圖像縮小到指定的寬度與高度內，同時維持其縱橫比。您必須提供寬度與高度。

{{ $image := $image.Fit "600x400" }}

Fill

Fill 會裁剪並調整圖像大小以符合指定的寬度和高度。您必須提供寬度與高度，可以使用 [anchor] 選項更改裁剪框的錨點位置。

{{ $image := $image.Fill "600x400" }}

Crop

Crop 將圖像裁剪至指定的寬度和高度而不進行調整大小。您必須提供寬度與高度，可以使用 [anchor] 選項更改裁剪框的錨點位置。

{{ $image := $image.Crop "600x400" }}

Filter

Filter 用於將一個或多個濾鏡套用到圖像上。

{{ $image := $image.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

以管道形式撰寫，Hugo 會按提供的順序套用濾鏡。

{{ $image := $image | images.Filter (images.GaussianBlur 6) (images.Pixelate 8) }}

有時可以創建一次濾鏡鏈，然後重複使用它。

{{ $filters := slice (images.GaussianBlur 6) (images.Pixelate 8) }}
{{ $image1 := $image1.Filter $filters }}
{{ $image2 := $image2.Filter $filters }}

Colors

.Colors 返回包含圖像主色調的十六進制字串切片，使用的是簡單的直方圖方法。

{{ $colors := $image.Colors }}

此方法運行速度較快，但如果您同時縮小圖像尺寸，從縮小的圖像中提取顏色將提高性能。

EXIF

您可以使用 .Exif 提取圖像的 EXIF 資訊，該方法僅支持 JPEG、PNG、TIFF 和 WebP 圖像。

{{ $exif := $image.Exif }}
{{ printf "Camera Model: %s" $exif.CameraModel }}
{{ printf "Focal Length: %s" $exif.FocalLength }}

Image processing options

多數圖像處理方法（例如 Process, Fill, 和 Crop）可選擇使用附加選項。以下是支持的選項：

format: 指定結果圖像格式，例如 jpg, png, webp。
quality: 調整壓縮質量（1-100）。僅適用於 jpg 和 webp。
anchor: 設置裁剪或填充框的錨點，例如 center, top-left, bottom-right。
rotate: 指定逆時針旋轉角度（90, 180, 270）。

以下是使用附加選項的範例：

{{ $image := $image.Fill "600x400 center" }}
{{ $image := $image.Process "resize 800x format=webp quality=75" }}

參考文件

在 Hugo 文件中，有更多與圖像處理相關的詳細說明和函式。以下是一些關鍵參考資料連結：