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/12/05, 21:39:23