images.Padding
Syntax
images.Padding V1 [V2] [V3] [V4] [COLOR]
Returns
images.filter
最后一个参数是画布颜色,使用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图像具有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") }}