图像处理
图像资源
要处理图像，您必须以页面资源、全局资源或远程资源的形式访问文件。
页面资源
页面资源是页面束（page bundle）中的文件。页面束是一个具有根目录下的 index.md 或 _index.md 文件的目录。
content/
└── posts/
└── post-1/ <-- 页面束
├── index.md
└── sunset.jpg <-- 页面资源
要以页面资源的形式访问图像：
{{ $image := .Resources.Get "sunset.jpg" }}
全局资源
全局资源是位于 assets 目录中或装载到 assets 目录中任意目录中的文件。
assets/
└── images/
└── sunset.jpg <-- 全局资源
要以全局资源的形式访问图像：
{{ $image := resources.Get "images/sunset.jpg" }}
远程资源
远程资源是可通过 HTTP 或 HTTPS 访问的远程服务器上的文件。要以远程资源的形式访问图像：
{{ $image := resources.GetRemote "https://gohugo.io/img/hugo-logo.png" }}
图像渲染
一旦您访问了页面资源或全局资源中的图像，可以在模板中使用 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 资源实现了 [Process]、[Resize]、[Fit]、[Fill]、[Crop]、[Filter]、[Colors] 和 [Exif] 方法。
Process
Process 使用给定的规范处理图像。规范可以包含一个可选的操作，其中之一是 resize、crop、fit 或 fill。这意味着您可以使用此方法代替 [Resize]、[Fit]、[Fill] 或 [Crop]。
详见 选项 获取可用的选项。
您也可以使用此方法来应用不需要缩放的图像处理，例如格式转换：
{{/* 将图像从 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
将图像调整为给定的宽度和/或高度。
如果同时指定了宽度和高度，则生成的图像将不成比例地缩放，除非原始图像具有相同的宽高比。
{{/* 缩放为宽度为 600px，并保持宽高比 */}}
{{ $image := $image.Resize "600x" }}
{{/* 缩放为高度为 400px，并保持宽高比 */}}
{{ $image := $image.Resize "x400" }}
{{/* 缩放为宽度为 600px 并高度为 400px */}}
{{ $image := $image.Resize "600x400" }}
Fit
降低图像尺寸以适应给定的尺寸，同时保持宽高比。必须提供宽度和高度。
{{ $image := $image.Fit "600x400" }}
Fill
裁剪并调整图像的大小以匹配给定尺寸，必须提供宽度和高度。使用 [anchor] 选项来更改裁剪框的锚点。
{{ $image := $image.Fill "600x400" }}
Crop
裁剪图像以匹配给定尺寸而不进行调整大小，必须提供宽度和高度。使用 [anchor] 选项来更改裁剪框的锚点。
{{ $image := $image.Crop "600x400" }}
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] 对象。
您可以访问 JPEG 和 TIFF 图像中的 EXIF 数据。为了在处理不包含 EXIF 数据的图像时防止错误，在访问 EXIF 数据时请将其包装在 [with] 语句中。
{{ with $image.Exif }}
Date: {{ .Date }}
Lat/Long: {{ .Lat }}/{{ .Long }}
Tags:
{{ range $k, $v := .Tags }}
TAG: {{ $k }}: {{ $v }}
{{ end }}
{{ end }}
您还可以使用[lang.FormatNumber] 函数分别单独访问 EXIF 字段，并根据需要格式化字段。
{{ with $image.Exif }}
<ul>
{{ with .Date }}<li>Date: {{ .Format "2006年1月2日" }}</li>{{ end }}
{{ with .Tags.ApertureValue }}<li>光圈：{{ lang.FormatNumber 2 . }}</li>{{ end }}
{{ with .Tags.BrightnessValue }}<li>亮度：{{ lang.FormatNumber 2 . }}</li>{{ end }}
{{ with .Tags.ExposureTime }}<li>曝光时间：{{ . }}</li>{{ end }}
{{ with .Tags.FNumber }}<li>光圈数：{{ . }}</li>{{ end }}
{{ with .Tags.FocalLength }}<li>焦距：{{ . }}</li>{{ end }}
{{ with .Tags.ISOSpeedRatings }}<li>ISO 设置：{{ . }}</li>{{ end }}
{{ with .Tags.LensModel }}<li>镜头型号：{{ . }}</li>{{ end }}
</ul>
{{ end }}
EXIF 变量
- .Date
- 图像创建日期/时间。使用 [time.Format] 函数进行格式化。
- .Lat
- GPS 纬度（以度为单位）。
- .Long
- GPS 经度（以度为单位）。
- .Tags
- 该图像的可用 EXIF 标签集合。您可以在 [站点配置] 中包括或排除此集合中的特定标签。
图像处理选项
[Resize]、[Fit]、[Fill] 和 [Crop] 方法接受用空格分隔的不区分大小写的选项列表。列表中选项的顺序无关紧要。
尺寸
使用 [Resize] 方法时，必须指定宽度、高度或二者同时指定。[Fit]、[Fill] 和 [Crop] 方法需要同时提供宽度和高度。所有尺寸以像素为单位。
{{ $image := $image.Resize "600x" }}
{{ $image := $image.Resize "x400" }}
{{ $image := $image.Resize "600x400" }}
{{ $image := $image.Fit "600x400" }}
{{ $image := $image.Fill "600x400" }}
{{ $image := $image.Crop "600x400" }}
旋转
按给定角度逆时针旋转图像。Hugo 在缩放之前执行旋转。例如，如果原始图像为 600x400，并且您希望将图像逆时针旋转 90 度，同时将其缩放 50%：
{{ $image = $image.Resize "200x r90" }}
在上述示例中，宽度表示旋转后的期望宽度。
要旋转图像而不进行缩放，请使用原始图像的尺寸：
{{ with .Resources.GetMatch "sunset.jpg" }}
{{ with .Resize (printf "%dx%d r90" .Height .Width) }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}
{{ end }}
在上述示例中，在第二行中，我们反转了宽度和高度，以反映旋转后的期望尺寸。
锚点
使用 [Crop] 或 [Fill] 方法时，锚点 确定裁剪框的位置。您可以指定 TopLeft、Top、TopRight、Left、Center、Right、BottomLeft、Bottom、BottomRight 或 Smart。
默认值是 Smart，它使用 [Smartcrop] 图像分析来确定裁剪框的最佳位置。您可以在[站点配置]中重写默认值。
例如，如果您有一个 400x200 的图像，鸟位于左上象限中，您可以创建一个包含鸟的 200x100 的缩略图：
{{ $image.Crop "200x100 TopLeft" }}
如果在使用 [Crop] 或 [Fill] 方法时使用了旋转，请相对于旋转后的图像指定锚点。
目标格式
默认情况下，Hugo 会使用原始格式对图像进行编码。通过指定 bmp、gif、jpeg、jpg、png、tif、tiff 或 webp，您可以将图像转换为其他格式。
{{ $image.Resize "600x webp" }}
要在不进行缩放的情况下转换图像，请使用原始图像的尺寸：
{{ with .Resources.GetMatch "sunset.jpg" }}
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}
{{ end }}
质量
适用于 JPEG 和 WebP 图像的 q 值确定转换图像的质量。较高的值产生更高质量的图像，而较低的值会产生较小的文件。将该值设置为介于 1 到 100（包括 1 和 100）之间的整数。
默认值为 75。您可以在[站点配置]中重写默认值。
{{ $image.Resize "600x webp q50" }}
提示
适用于 WebP 图像，此选项对应一组预定义的编码参数。
| 值 | 示例 |
|---|---|
drawing |
高对比度细节的手绘图或线描图 |
icon |
小而多彩的图像 |
photo |
具有自然光的室外照片 |
picture |
室内照片，例如人像 |
text |
主要为文本的图像 |
默认值为 photo。您可以在[站点配置]中重写默认值。
{{ $image.Resize "600x webp picture" }}
背景颜色
在将支持透明度（例如 PNG）的图像转换为不支持透明度（例如 JPEG）的图像时，您可以指定结果图像的背景颜色。
使用 3 位或 6 位十六进制颜色代码（例如 #00f 或 #0000ff）。
默认值为白色 #ffffff。您可以在[站点配置]中重写默认值。
{{ $image.Resize "600x jpg #b31280" }}
重采样滤镜
在调整图像大小时，可以指定重采样滤镜。常用的重采样滤镜包括：
| 滤镜 | 描述 |
|---|---|
Box |
用于缩小的简单和快速平均滤波器 |
Lanczos |
高质量的用于摄影图像的重采样滤波器，产生锐利的结果 |
CatmullRom |
锐利的立方滤波器，比 Lanczos 滤波器更快，提供类似的结果 |
MitchellNetravali |
立方滤波器，比 CatmullRom 滤波器产生更平滑的结果，没有 CatmullRom 滤波器的环状伪影 |
Linear |
双线性重采样滤波器，生成平滑的输出，快于立方滤波器 |
NearestNeighbor |
最快的重采样滤波器，没有抗锯齿效果 |
默认值为 Box。您可以在[站点配置