diff --git a/docs/content/en/functions/images/index.md b/docs/content/en/functions/images/index.md index 5553aee92c8..274072dba73 100644 --- a/docs/content/en/functions/images/index.md +++ b/docs/content/en/functions/images/index.md @@ -40,6 +40,27 @@ A shorter version of the above, if you only need to apply the filter once: The above will overlay `$logo` in the upper left corner of `$img` (at position `x=50, y=50`). +### Text + +Using the `Text` filter, you can add text to an image. + +{{% funcsig %}} +images.Text TEXT DICT) +{{% /funcsig %}} + +The following example will add the text `Hugo rocks!` to the image with the specified color, size and position. + +``` +{{ $img := resources.Get "/images/background.png"}} +{{ $img = $img.Filter (images.Text "Hugo rocks!" (dict + "color" "#ffffff" + "size" 60 + "linespacing" 2 + "x" 10 + "y" 20 +))}} +``` + ### Brightness {{% funcsig %}} diff --git a/go.mod b/go.mod index db14b0100d3..51246e25833 100644 --- a/go.mod +++ b/go.mod @@ -60,7 +60,7 @@ require ( github.com/yuin/goldmark v1.4.4 github.com/yuin/goldmark-highlighting v0.0.0-20200307114337-60d527fdb691 gocloud.dev v0.20.0 - golang.org/x/image v0.0.0-20210220032944-ac19c3e999fb + golang.org/x/image v0.0.0-20211028202545-6944b10bf410 golang.org/x/net v0.0.0-20210614182718-04defd469f4e golang.org/x/sync v0.0.0-20210220032951-036812b2e83c golang.org/x/text v0.3.7 diff --git a/go.sum b/go.sum index 952d02793aa..2832dc75486 100644 --- a/go.sum +++ b/go.sum @@ -558,8 +558,9 @@ golang.org/x/exp v0.0.0-20200207192155-f17229e696bd/go.mod h1:J/WKrq2StrnmMY6+EH golang.org/x/exp v0.0.0-20200224162631-6cc2880d07d6/go.mod h1:3jZMyOhIsHpP37uCMkUooju7aAi5cS1Q23tOzKc+0MU= golang.org/x/image v0.0.0-20190227222117-0694c2d4d067/go.mod h1:kZ7UVZpmo3dzQBMxlp+ypCbDeSB+sBbTgSJuh5dn5js= golang.org/x/image v0.0.0-20190802002840-cff245a6509b/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0= -golang.org/x/image v0.0.0-20210220032944-ac19c3e999fb h1:fqpd0EBDzlHRCjiphRR5Zo/RSWWQlWv34418dnEixWk= golang.org/x/image v0.0.0-20210220032944-ac19c3e999fb/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0= +golang.org/x/image v0.0.0-20211028202545-6944b10bf410 h1:hTftEOvwiOq2+O8k2D5/Q7COC7k5Qcrgc2TFURJYnvQ= +golang.org/x/image v0.0.0-20211028202545-6944b10bf410/go.mod h1:023OzeP/+EPmXeapQh35lcL3II3LrY8Ic+EFFKVhULM= golang.org/x/lint v0.0.0-20181026193005-c67002cb31c3/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE= golang.org/x/lint v0.0.0-20190227174305-5b3e6a55c961/go.mod h1:wehouNa3lNwaWXcvxsM5YxQ5yQlVC4a0KAMCusXpPoU= golang.org/x/lint v0.0.0-20190301231843-5614ed5bae6f/go.mod h1:UVdnD1Gm6xHRNCYTkRU2/jEulfH38KcIWyp/GAMgvoE= diff --git a/resources/image_test.go b/resources/image_test.go index 911e50f6fb2..c2a5ee90223 100644 --- a/resources/image_test.go +++ b/resources/image_test.go @@ -674,6 +674,9 @@ func TestImageOperationsGolden(t *testing.T) { f.Hue(22), f.Contrast(32.5), f.Overlay(gopher.(images.ImageSource), 20, 30), + f.Text("No options"), + f.Text("This long text is to test line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."), + f.Text("Hugo rocks!", map[string]interface{}{"x": 30, "y": 30, "size": 15, "color": "#ff0000"}), } resized, err := orig.Fill("400x200 center") diff --git a/resources/images/filters.go b/resources/images/filters.go index 74c50363e5d..c933e733b36 100644 --- a/resources/images/filters.go +++ b/resources/images/filters.go @@ -15,6 +15,8 @@ package images import ( + "github.com/gohugoio/hugo/common/maps" + "github.com/disintegration/gift" "github.com/spf13/cast" ) @@ -33,6 +35,43 @@ func (*Filters) Overlay(src ImageSource, x, y interface{}) gift.Filter { } } +// Text creates a filter that draws text with the given options. +func (*Filters) Text(text string, options ...interface{}) gift.Filter { + tf := textFilter{ + text: text, + color: "#ffffff", + size: 20, + x: 10, + y: 10, + linespacing: 2, + } + + var opt map[string]interface{} + if len(options) > 0 { + opt := maps.MustToParamsAndPrepare(options[0]) + for option, v := range opt { + switch option { + case "color": + tf.color = cast.ToString(v) + case "size": + tf.size = cast.ToFloat64(v) + case "x": + tf.x = cast.ToInt(v) + case "y": + tf.y = cast.ToInt(v) + case "linespacing": + tf.linespacing = cast.ToInt(v) + } + + } + } + + return filter{ + Options: newFilterOpts(text, opt), + Filter: tf, + } +} + // Brightness creates a filter that changes the brightness of an image. // The percentage parameter must be in range (-100, 100). func (*Filters) Brightness(percentage interface{}) gift.Filter { diff --git a/resources/images/text.go b/resources/images/text.go new file mode 100644 index 00000000000..a90f2527292 --- /dev/null +++ b/resources/images/text.go @@ -0,0 +1,94 @@ +// Copyright 2021 The Hugo Authors. All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +package images + +import ( + "image" + "image/draw" + "strings" + + "github.com/disintegration/gift" + + "golang.org/x/image/font" + "golang.org/x/image/font/gofont/goregular" + "golang.org/x/image/font/opentype" + "golang.org/x/image/math/fixed" +) + +var _ gift.Filter = (*textFilter)(nil) + +type textFilter struct { + text, color string + x, y int + size float64 + linespacing int +} + +func (f textFilter) Draw(dst draw.Image, src image.Image, options *gift.Options) { + color, err := hexStringToColor(f.color) + if err != nil { + panic(err) + } + + // Load and parse font + ttf := goregular.TTF + otf, err := opentype.Parse(ttf) + if err != nil { + panic(err) + } + + // Set font options + face, err := opentype.NewFace(otf, &opentype.FaceOptions{ + Size: f.size, + DPI: 72, + Hinting: font.HintingNone, + }) + if err != nil { + panic(err) + } + + d := font.Drawer{ + Dst: dst, + Src: image.NewUniform(color), + Face: face, + } + + gift.New().Draw(dst, src) + + // Draw text, consider and include linebreaks + maxWidth := dst.Bounds().Dx() - 20 + fontHeight := face.Metrics().Ascent.Ceil() + + // Correct y position based on font and size + f.y = f.y + fontHeight + + // Start position + y := f.y + d.Dot = fixed.P(f.x, f.y) + + // Draw text and break line at max width + parts := strings.Fields(f.text) + for _, str := range parts { + strWith := font.MeasureString(face, str) + if (d.Dot.X.Ceil() + strWith.Ceil()) >= maxWidth { + y = y + fontHeight + f.linespacing + d.Dot = fixed.P(f.x, y) + } + d.DrawString(str + " ") + } +} + +func (f textFilter) Bounds(srcBounds image.Rectangle) image.Rectangle { + return image.Rect(0, 0, srcBounds.Dx(), srcBounds.Dy()) +} diff --git a/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_88b9a832bb3b1c3795eeb1461ff6e4d2.png b/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_88b9a832bb3b1c3795eeb1461ff6e4d2.png new file mode 100644 index 00000000000..164673ea444 Binary files /dev/null and b/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_88b9a832bb3b1c3795eeb1461ff6e4d2.png differ diff --git a/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_9165e5559db8ba31a401327b5617c098.png b/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_9165e5559db8ba31a401327b5617c098.png new file mode 100644 index 00000000000..50fae767a90 Binary files /dev/null and b/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_9165e5559db8ba31a401327b5617c098.png differ diff --git a/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_aeaaf23afe6fb4702bd3992426d0cad3.png b/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_aeaaf23afe6fb4702bd3992426d0cad3.png new file mode 100644 index 00000000000..ce791767ffb Binary files /dev/null and b/resources/testdata/golden/gohugoio24_huc57dd738f4724f4b341121e66fd85555_267952_aeaaf23afe6fb4702bd3992426d0cad3.png differ diff --git a/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_2e05d39f4cb329be10e8c515494cef76.png b/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_2e05d39f4cb329be10e8c515494cef76.png new file mode 100644 index 00000000000..795a608e8f9 Binary files /dev/null and b/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_2e05d39f4cb329be10e8c515494cef76.png differ diff --git a/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_d02bcf473379884ad9cf2cd9a743a668.png b/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_d02bcf473379884ad9cf2cd9a743a668.png new file mode 100644 index 00000000000..c801560e708 Binary files /dev/null and b/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_d02bcf473379884ad9cf2cd9a743a668.png differ diff --git a/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_f17bba59421e7a500387232295512fc0.png b/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_f17bba59421e7a500387232295512fc0.png new file mode 100644 index 00000000000..64b0b3f7a70 Binary files /dev/null and b/resources/testdata/golden/gohugoio8_hu7f72c00afdf7634587afaa5eff2a25b2_73538_f17bba59421e7a500387232295512fc0.png differ diff --git a/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_34b9b6e1ec5f9f17d398c0d3fa7e4c8f.jpg b/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_34b9b6e1ec5f9f17d398c0d3fa7e4c8f.jpg new file mode 100644 index 00000000000..0479924560b Binary files /dev/null and b/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_34b9b6e1ec5f9f17d398c0d3fa7e4c8f.jpg differ diff --git a/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_510813cc53c37e2d489d2f9fdb13f749.jpg b/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_510813cc53c37e2d489d2f9fdb13f749.jpg new file mode 100644 index 00000000000..6c3da13856c Binary files /dev/null and b/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_510813cc53c37e2d489d2f9fdb13f749.jpg differ diff --git a/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_c2d24766b49f3147f5a4137a8db592ac.jpg b/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_c2d24766b49f3147f5a4137a8db592ac.jpg new file mode 100644 index 00000000000..b425b0d9289 Binary files /dev/null and b/resources/testdata/golden/sunset_hu59e56ffff1bc1d8d122b1403d34e039f_90587_c2d24766b49f3147f5a4137a8db592ac.jpg differ