HUGO

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
gohugoio Star
  • 关于
    • 本节内容
    • 简介
    • 特性
    • 隐私
    • 安全
    • 许可证
  • 安装
    • 本节内容
    • macOS
    • Linux
    • Windows
    • BSD
  • 入门
    • 本节内容
    • 快速入门
    • 基本用法
    • 目录结构
    • 配置
    • 配置标记
    • 配置构建
    • 术语表
    • 外部学习资源
  • 快速参考
    • 本节内容
    • 表情符号
    • 函数
    • 方法
    • 页面集合
  • 内容管理
    • 本节内容
    • 组织
    • 页面包
    • 内容格式
    • 前言
    • 构建选项
    • 页面资源
    • 图像处理
    • 短代码
    • 相关内容
    • 章节
    • 内容类型
    • 原型
    • 分类法
    • 摘要
    • 链接和交叉引用
    • URL 管理
    • 菜单
    • 评论
    • 多语言
    • Markdown 属性
    • 语法高亮
    • 图表
    • 数学
    • 数据源
    • 内容适配器
  • 模板
    • 本节内容
    • 简介
    • 模板类型
    • 查找顺序
    • 基础模板
    • 主页模板
    • 单页模板
    • 章节模板
    • 分类模板
    • 术语模板
    • 局部模板
    • 内容视图模板
    • 短代码模板
    • 站点地图模板
    • RSS 模板
    • 404 模板
    • robots.txt 模板
    • 菜单
    • 分页
    • 嵌入式模板
    • 自定义输出格式
  • 函数
    • 本节内容
    • cast
    • collections
    • compare
    • crypto
    • css
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hash
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • 方法
    • 本节内容
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pager
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • 渲染钩子
    • 本节内容
    • 简介
    • 块引用
    • 代码块
    • 标题
    • 图像
    • 链接
    • 直通
    • 表格
  • 短代码
    • 本节内容
    • 评论
    • 详情
    • 图
    • Gist
    • 高亮
    • Instagram
    • 参数
    • QR
    • Ref
    • Relref
    • Vimeo
    • X
    • YouTube
  • Hugo 模块
    • 本节内容
    • 配置 Hugo 模块
    • 使用 Hugo 模块
    • 主题组件
  • Hugo 管道
    • 本节内容
    • 简介
    • 将 Sass 转译为 CSS
    • PostCSS
    • 后处理
    • JavaScript 构建
    • 资源压缩
    • 连接资源
    • 指纹识别和 SRI 哈希
    • 从字符串创建资源
    • 从模板创建资源
  • CLI
  • 故障排除
    • 本节内容
    • 审计
    • 日志记录
    • 检查
    • 弃用
    • 性能
    • 常见问题解答
  • 开发者工具
    • 本节内容
    • 编辑器插件
    • 前端
    • 搜索
    • 迁移
    • 其他项目
  • 托管和部署
    • 本节内容
    • Hugo 部署
    • 使用 Rclone 部署
    • 使用 Rsync 部署
    • 在 21YunBox 上托管
    • 在 AWS Amplify 上托管
    • 在 Azure Static Web Apps 上托管
    • 在 Cloudflare Pages 上托管
    • 在 Firebase 上托管
    • 在 GitHub Pages 上托管
    • 在 GitLab Pages 上托管
    • 在 KeyCDN 上托管
    • 在 Netlify 上托管
    • 在 Render 上托管
  • 贡献
    • 本节内容
    • 开发
    • 文档
    • 主题
  • 维护
方法 资源方法

Filter

适用于图像,将一个或多个图像滤镜应用于给定的图像资源。

语法

RESOURCE.Filter FILTER...

返回

images.ImageResource

将一个或多个 图像滤镜 应用于给定的图像。

应用单个滤镜

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

应用两个或多个滤镜,从左到右执行

{{ $filters := slice
  images.Grayscale
  (images.GaussianBlur 8)
}}
{{ with resources.Get "images/original.jpg" }}
  {{ with .Filter $filters }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

您还可以使用 images.Filter 函数应用图像滤镜。

将此方法与 全局、页面 或 远程 资源一起使用。

示例

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

原始

Zion National Park

已处理

Zion National Park

图像滤镜

将以下任何滤镜与 Filter 方法一起使用。

images.AutoOrient
返回一个图像滤镜,该滤镜根据其 EXIF 方向标签按需旋转和翻转图像。
images.Brightness
返回一个图像滤镜,该滤镜更改图像的亮度。
images.ColorBalance
返回一个图像滤镜,该滤镜更改图像的色彩平衡。
images.Colorize
返回一个图像滤镜,该滤镜生成图像的着色版本。
images.Contrast
返回一个图像滤镜,该滤镜更改图像的对比度。
images.Dither
返回一个抖动图像的图像滤镜。
images.Gamma
返回一个对图像执行伽玛校正的图像滤镜。
images.GaussianBlur
返回一个对图像应用高斯模糊的图像滤镜。
images.Grayscale
返回一个生成图像的灰度版本的图像滤镜。
images.Hue
返回一个旋转图像色调的图像滤镜。
images.Invert
返回一个否定图像颜色的图像滤镜。
images.Mask
返回一个将遮罩应用于源图像的图像滤镜。
images.Opacity
返回一个更改图像不透明度的图像滤镜。
images.Overlay
返回一个在给定坐标(相对于左上角)叠加源图像的图像滤镜。
images.Padding
返回一个调整图像画布大小而不调整图像大小的图像滤镜。
images.Pixelate
返回一个对图像应用像素化效果的图像滤镜。
images.Process
返回一个使用给定规范处理给定图像的图像滤镜。
images.QR
使用指定的选项将给定文本编码为 QR 码,并返回图像资源。
images.Saturation
返回一个更改图像饱和度的图像滤镜。
images.Sepia
返回一个生成图像的棕褐色调版本的图像滤镜。
images.Sigmoid
返回一个使用 sigmoid 函数更改图像对比度的图像滤镜。
images.Text
返回一个向图像添加文本的图像滤镜。
images.UnsharpMask
返回一个锐化图像的图像滤镜。

另请参阅

  • images.Filter

本页内容

  • 示例
  • 图像滤镜

本节内容

  • 颜色
  • 内容
  • 裁剪
  • 数据
  • 错误
  • Exif
  • 填充
  • Filter
  • 适合
  • 高度
  • MediaType
  • 名称
  • 参数
  • 永久链接
  • 处理
  • 发布
  • 相对永久链接
  • 调整大小
  • ResourceType
  • 标题
  • 宽度
上次更新时间:2025 年 1 月 2 日:更新 Filter.md (d4bdfb96b)
改进此页面
由 Hugo 作者
Hugo Logo
  • 提交问题
  • 获取帮助
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 

Hugo 赞助商

您的公司?
 

Hugo 徽标的版权归 Steve Francia 2013–2025 所有。

Hugo Gopher 基于 Renée French 的原创作品。

  • 新闻
  • 文档
  • 主题
  • 社区
  • GitHub
  • 关于
  • 安装
  • 入门
  • 快速参考
  • 内容管理
  • 模板
  • 函数
  • 方法
  • 渲染钩子
  • 短代码
  • Hugo 模块
  • Hugo 管道
  • CLI
  • 故障排除
  • 开发者工具
  • 托管和部署
  • 贡献
  • 维护