golang 给微信小程序码图片底部添加文字

需求

由于要做硬件设备的扫码支付，生产的时候为了方便硬件屏幕上确认部署的支付码跟设备匹配，需要在微信小程序码的底部添加上标识文字， 例如设备 ID 之类的。

效果演示

还是三方库好用

https://github.com/fogleman/gg

比用 golang 自带库方便太多了。否则实现添加个文字，脑子爆炸。

字体下载

https://fonts.google.com/

图片上添加文字，就涉及到文本字体的选择，可以在 google fonts 上根据语种需要选择字体。

实现逻辑

• 先生成一张白色底的大背景图，宽度为原小程序码的宽度，高度加上了文字的高度
• 然后将原小程序图片复制到背景图的顶部
• 底部添加文本，居中显示

实现代码

package main

import (
	"image"
	"image/color"
	"image/draw"
	_ "image/jpeg"
	"log"
	"os"

	"github.com/fogleman/gg"
)

func main() {
	filePath := "images/hello.jpg"
	width, err := getImageWidth(filePath)
	if err != nil {
		return
	}
	log.Printf("image width: %+v\n", width)

	newImage(filePath)
}

func getImageWidth(filePath string) (int, error) {
	reader, err := os.Open(filePath)

	if err != nil {
		log.Println(err.Error())
		return 0, err
	}
	defer reader.Close()

	im, _, err := image.DecodeConfig(reader)
	if err != nil {
		// 如果不 import image/jpeg 会报错：
		// image: unknown format
		log.Println(err.Error())
		return 0, err
	}
	return im.Width, nil
}

func newImage(srcFile string) {
	fontSize := 30
	fontColor := color.RGBA{0, 0, 0, 0xff}
	background := color.RGBA{0xff, 0xff, 0xff, 0xff}
	reader, err := os.Open(srcFile)

	if err != nil {
		log.Println(err.Error())
		return
	}
	defer reader.Close()

	srcImg, _, err := image.Decode(reader)
	if err != nil {
		// 如果不 import image/jpeg 会报错：
		// image: unknown format
		log.Println(err.Error())
		return
	}
	width := srcImg.Bounds().Max.X
	height := width + 2*fontSize

	upLeft := image.Point{0, 0}
	downRight := image.Point{width, height}

        // 生成背景图
	img := image.NewRGBA(image.Rectangle{upLeft, downRight})
	//background := color.RGBA{0, 0xFF, 0, 0xCC}
        // 设置背景色 （这个如果用 gg 库实现其实更简洁）
	draw.Draw(img, img.Bounds(), &image.Uniform{background}, image.ZP, draw.Src)
        // 小程序码放顶部
	draw.Draw(img, srcImg.Bounds(), srcImg, image.ZP, draw.Src)

        // 添加文字
	dc := gg.NewContextForRGBA(img)
	dc.SetColor(fontColor)
        // 设置字体，及字体大小
	if err := dc.LoadFontFace("Roboto-Medium.ttf", 30); err != nil {
		panic(err)
	}
	text := "Terminator T-800 1024"
	textWidth, _ := dc.MeasureString(text)
	dc.DrawString(text, (float64(width)-textWidth)/2, float64(width+fontSize))

	//f, _ := os.Create("images/result.png")
	//png.Encode(f, img)
	dc.SavePNG("images/result.png")
}

参考

• https://blog.logrocket.com/working-with-go-images/
• https://stackoverflow.com/questions/35964656/golang-how-to-concatenate-append-images-to-one-another
• https://yourbasic.org/golang/create-image/
• 带背景色的图片 https://medium.com/@satorulogic/generating-simple-images-with-go-aed9bce37a61
• 添加文字 https://tkg.codes/generating-social-images-using-go-and-gg/
• 添加文字，易理解 https://juejin.cn/post/6908168206033092616