イメージ処理
はじめに
Hugoでは、ページリソースの画像ファイルに対して、イメージ処理を行うことができます。
イメージ処理
イメージ処理を行うためには、イメージリソースを取得後、取得したイメージリソースに対して処理を行います。
イメージリソースの取得
イメージリソースを取得するには、イメージに関するページリソースを取得します。ファイル名から、イメージリソースを取得するには、MatchもしくはGetMatchを利用します。Matchを利用したときは、スライスが返ってくるので、注意が必要です。
各種イメージ処理
以下のようなイメージ処理が可能です(全てではありません)。比較のために、240x180のイメージを処理してみました(表の最初)。
結果は、表に入れたため、縮尺されている可能性があります。
| 処理 | パラメータ | 説明 | 処理例 | 処理後のサイズ | 結果 |
|---|---|---|---|---|---|
| - | - | オリジナルのイメージ | - | 240x180 |
|
| Resize | "幅x"高さ" | 指定したサイズに変更する。 | $resource.Resize "360x360" | 360x360 |
|
| $resource.Resize "120x120" | 120x120 |
|
|||
| "幅"x | 縦横比を保ったまま、サイズを変更する。 | $resource.Resize "120x" | 120x90 |
|
|
| x"高さ" | $resource.Resize "x120" | 160x120 |
|
||
| Fit | "幅x"高さ" | 縦横比を保ったまま、指定したサイズに変更する。 拡大はできません。 | $resource.Fit "360x360" | 240x180 |
|
| $resource.Fit "120x120" | 120x90 |
|
|||
| Fill | "幅x"高さ" | リサイズ後、サイズに合わせて切り取る。 切り取る場所は、以下が指定可能。 Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.デフォルトは、Smart | $resource.Fill "360x360" | 360x360 |
|
| $resource.Fill "90x120" | 90x120 |
|
|||
| $resource.Fill "90x120 Right" | 90x120 |
|
オプション
以下のようなオプションも利用できます(こちらもすべてではありません)。
| オプション | パラメータ | 説明 | 処理例 | 結果 |
|---|---|---|---|---|
| - | - | オリジナルのイメージ | - |
|
| 背景色 | 色コード | 透明部分を指定した色に変更する。 | $resource.Resize "360x360 #ff0000" |
|
| $resource.Fit "120x120 #0f0" |
|
|||
| $resource.Fill "90x120 #0000ff" |
|
|||
| 回転 | 角度 | 指定した角度だけ回転する。 | $resource.Resize "120x120 r90" |
|
| $resource.Fit "120x120 r180" |
|
|||
| $resource.Fill "90x120 r45" |
|
最終更新日
January 2, 2022