「连载十六」在图片上绘制文字

  1. 知识点
  2. 本文目标
  3. 实现
    1. 安装
    2. 绘制文字
    3. 业务逻辑
  4. 验证
  5. 总结
  6. 参考
    1. 本系列示例代码
  7. 关于
    1. 修改记录
    1. 我的公众号

知识点

  • 字体库使用
  • 图片合成

本文目标

主要实现合并后的海报上绘制文字的功能(这个需求也是常见的很了),内容比较简单。

实现

这里使用的是 微软雅黑 的字体,请点击进行下载并存放到 runtime/fonts 目录下(字体文件占 16 MB 大小)

安装

1
$ go get -u github.com/golang/freetype

绘制文字

打开 service/article_service/article_poster.go 文件,增加绘制文字的业务逻辑,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
type DrawText struct {
JPG draw.Image
Merged *os.File

Title string
X0 int
Y0 int
Size0 float64

SubTitle string
X1 int
Y1 int
Size1 float64
}

func (a *ArticlePosterBg) DrawPoster(d *DrawText, fontName string) error {
fontSource := setting.AppSetting.RuntimeRootPath + setting.AppSetting.FontSavePath + fontName
fontSourceBytes, err := ioutil.ReadFile(fontSource)
if err != nil {
return err
}

trueTypeFont, err := freetype.ParseFont(fontSourceBytes)
if err != nil {
return err
}

fc := freetype.NewContext()
fc.SetDPI(72)
fc.SetFont(trueTypeFont)
fc.SetFontSize(d.Size0)
fc.SetClip(d.JPG.Bounds())
fc.SetDst(d.JPG)
fc.SetSrc(image.Black)

pt := freetype.Pt(d.X0, d.Y0)
_, err = fc.DrawString(d.Title, pt)
if err != nil {
return err
}

fc.SetFontSize(d.Size1)
_, err = fc.DrawString(d.SubTitle, freetype.Pt(d.X1, d.Y1))
if err != nil {
return err
}

err = jpeg.Encode(d.Merged, d.JPG, nil)
if err != nil {
return err
}

return nil
}

这里主要使用了 freetype 包,分别涉及如下细项:

1、freetype.NewContext:创建一个新的 Context,会对其设置一些默认值

1
2
3
4
5
6
7
8
func NewContext() *Context {
return &Context{
r: raster.NewRasterizer(0, 0),
fontSize: 12,
dpi: 72,
scale: 12 << 6,
}
}

2、fc.SetDPI:设置屏幕每英寸的分辨率

3、fc.SetFont:设置用于绘制文本的字体

4、fc.SetFontSize:以磅为单位设置字体大小

5、fc.SetClip:设置剪裁矩形以进行绘制

6、fc.SetDst:设置目标图像

7、fc.SetSrc:设置绘制操作的源图像,通常为 image.Uniform

1
2
3
4
5
6
7
8
9
10
var (
// Black is an opaque black uniform image.
Black = NewUniform(color.Black)
// White is an opaque white uniform image.
White = NewUniform(color.White)
// Transparent is a fully transparent uniform image.
Transparent = NewUniform(color.Transparent)
// Opaque is a fully opaque uniform image.
Opaque = NewUniform(color.Opaque)
)

8、fc.DrawString:根据 Pt 的坐标值绘制给定的文本内容

业务逻辑

打开 service/article_service/article_poster.go 方法,在 Generate 方法增加绘制文字的代码逻辑,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
func (a *ArticlePosterBg) Generate() (string, string, error) {
fullPath := qrcode.GetQrCodeFullPath()
fileName, path, err := a.Qr.Encode(fullPath)
if err != nil {
return "", "", err
}

if !a.CheckMergedImage(path) {
...

draw.Draw(jpg, jpg.Bounds(), bgImage, bgImage.Bounds().Min, draw.Over)
draw.Draw(jpg, jpg.Bounds(), qrImage, qrImage.Bounds().Min.Sub(image.Pt(a.Pt.X, a.Pt.Y)), draw.Over)

err = a.DrawPoster(&DrawText{
JPG: jpg,
Merged: mergedF,

Title: "Golang Gin 系列文章",
X0: 80,
Y0: 160,
Size0: 42,

SubTitle: "---煎鱼",
X1: 320,
Y1: 220,
Size1: 36,
}, "msyhbd.ttc")

if err != nil {
return "", "", err
}
}

return fileName, path, nil
}

验证

访问生成文章海报的接口 $HOST/api/v1/articles/poster/generate?token=$token,检查其生成结果,如下图

image

总结

在本章节在 连载十五 的基础上增加了绘制文字,在实现上并不困难,而这两块需求一般会同时出现,大家可以多加练习,了解里面的逻辑和其他 API 😁

参考

本系列示例代码

关于

修改记录

  • 第一版:2018 年 02 月 16 日发布文章
  • 第二版:2019 年 10 月 02 日修改文章

如果有任何疑问或错误,欢迎在 issues 进行提问或给予修正意见,如果喜欢或对你有所帮助,欢迎 Star,对作者是一种鼓励和推进。

我的公众号

image


免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com

推荐阅读:

文章标题:「连载十六」在图片上绘制文字

本文作者:知识铺

发布时间:2018-07-07, 12:00:00

最后更新:2020-04-19, 17:52:49

原始链接:https://blog.zshipu.com/2018/07/07/golang/go/gin/2018-07-07-font/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏