centos镜像添加chrome浏览器以及中文字体
文章发布较早，内容可能过时，阅读注意甄别。
业务方有一个需求是想在服务器跑一些浏览器截屏的功能，因为这个环境是在容器中进行的，因此这里记录一下如何构建这个镜像。
想要完成这个需求，有两个主要依赖项需要满足：
- chrome 环境。
- 中文字体。
# 1，演示验证
了解需求之后，我们应该尽可能找到能够验证的方式，以免增加与需求人员进行更多无必要的沟通的成本。
冲浪时我了解到chromedp (opens new window)包能够进行相关操作，而且官方也提供了简便直观的示例，因此有如下脚本：
// Command screenshot is a chromedp example demonstrating how to take a
// screenshot of a specific element and of the entire browser viewport.
package main
import (
"context"
"io/ioutil"
"log"
"github.com/chromedp/chromedp"
)
func main() {
// create context
ctx, cancel := chromedp.NewContext(
context.Background(),
// chromedp.WithDebugf(log.Printf),
)
defer cancel()
// capture screenshot of an element
var buf []byte
// capture entire browser viewport, returning png with quality=90
if err := chromedp.Run(ctx, fullScreenshot(`https://wiki.eryajf.net/`, 90, &buf)); err != nil {
log.Fatal(err)
}
if err := ioutil.WriteFile("fullScreenshot.png", buf, 0o644); err != nil {
log.Fatal(err)
}
log.Printf("wrote elementScreenshot.png and fullScreenshot.png")
}
// fullScreenshot takes a screenshot of the entire browser viewport.
//
// Note: chromedp.FullScreenshot overrides the device's emulation settings. Reset
func fullScreenshot(urlstr string, quality int, res *[]byte) chromedp.Tasks {
return chromedp.Tasks{
chromedp.Navigate(urlstr),
chromedp.FullScreenshot(res, quality),
}
}
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
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
在本地运行之后会生成一个 fullScreenshot.png：
# 2，安装 chrome 环境
添加 yum 源：
cat >> /etc/yum.repos.d/google-chrome.repo <<EOF
[google-chrome]
name=google-chrome
baseurl=https://dl.google.com/linux/chrome/rpm/stable/\$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
EOF
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
宿主机上，我们直接使用 yum 即可安装，镜像构建同样可以使用这个命令来进行安装。
yum -y install google-chrome
1
或者下载到本地，使用本地安装的姿势：
wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
1
进行安装：
yum localinstall ./google-chrome-stable_current_x86_64.rpm
1
# 3，添加中文字体
# 1，方法一
直接使用如下命令安装并验证：
# 管理工具
$ yum -y install fontconfig
# 安装字体
$ yum groupinstall fonts
# 刷新缓存
$ fc-cache -vf
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
查看效果：
$ fc-list :lang=zh
/usr/share/fonts/wqy-microhei/wqy-microhei.ttc: WenQuanYi Micro Hei,文泉驛微米黑:style=Regular
/usr/share/fonts/wqy-zenhei/wqy-zenhei.ttc: WenQuanYi Zen Hei:style=Regular
/usr/share/fonts/wqy-zenhei/wqy-zenhei.ttc: WenQuanYi Zen Hei Sharp,文泉驛點陣正黑:style=Regular
/usr/share/fonts/cjkuni-uming/uming.ttc: AR PL UMing TW MBE:style=Light
/usr/share/fonts/wqy-microhei/wqy-microhei.ttc: WenQuanYi Micro Hei Mono,文泉驛等寬微米黑:style=Regular
/usr/share/fonts/wqy-zenhei/wqy-zenhei.ttc: WenQuanYi Zen Hei Mono:style=Regular
/usr/share/fonts/cjkuni-uming/uming.ttc: AR PL UMing TW:style=Light
/usr/share/fonts/cjkuni-uming/uming.ttc: AR PL UMing HK:style=Light
/usr/share/fonts/cjkuni-uming/uming.ttc: AR PL UMing CN:style=Light
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 2，方法二
使用如下命令安装：
yum -y install fontconfig
1
Linux 字体目录是：/usr/share/fonts，只要将字体文件放入这个目录就可以了，我在这里存了一个字体：点我下载 (opens new window)，注意最好通过浏览器下载然后校验一下仓库里的 md5，否则可能会导致下边的步骤失败：
MD5 (WeiRuanYaHei-1.ttf) = f80465e9d8cea2b48da01f5aba236b59
1
下载之后将文件放到字体目录中，然后执行如下命令：
fc-cache -vf
1
最后通过如下命令进行验证，如果看到字体输出，则说明安装成功：
$ fc-list :lang=zh
/usr/share/fonts/WeiRuanYaHei-1.ttf: Microsoft YaHei:style=Regular,Normal
1
2
2
# 4，容器化
如上步骤都已经成熟之后，直接生成如下 Dockerfile:
FROM registry.cn-hangzhou.aliyuncs.com/eryajf/centos:7.5
RUN yum -y install google-chrome fontconfig
ADD WeiRuanYaHei-1.ttf /usr/share/fonts
RUN fc-cache -vf
1
2
3
4
2
3
4
构建并验证：
$ docker build -t test .
$ docker run -it --rm test fc-list :lang=zh
/usr/share/fonts/WeiRuanYaHei-1.ttf: Microsoft YaHei:style=Regular,Normal
1
2
3
2
3
然后将上边的验证代码编译成二进制，丢进容器里，发现仍旧能够正常生成网页快照。
上次更新: 2024/07/04, 22:40:37
|