docker Dockerfile+docker-compose搭建centos环境及安装chrome实现html转png图片

大蜡烛

于 2024-07-01 04:05:35 发布

阅读量29

点赞数

docker Dockerfile+docker-compose搭建centos环境及安装chrome实现html转png图片_centos

Dockerfile

段落引用Dockerfile文件所在目录包含文件：

 Dockerfile
 MSYH.TTC  中文字体
 MSYHL.TTC   中文字体
 MSYHBD.TTC   中文字体
 screenShootLinux
 docker-compose.yaml
 Centos-8.repo yum源配置

# 使用CentOS作为基础镜像 
FROM centos:latest 

RUN cd /etc/yum.repos.d/ && mkdir bak && mv *.repo ./bak 
COPY Centos-8.repo /etc/yum.repos.d/Centos-8.repo 

# 安装Chrome的依赖 
RUN yum install -y lsb wget libXScrnSaver 

# 下载Chrome rpm包并安装
 RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm && \ 
 yum install -y google-chrome-stable_current_x86_64.rpm && \
 rm -f google-chrome-stable_current_x86_64.rpm 

 RUN yum install -y Xvfb 

 # 设置环境变量以支持Chrome 
 ENV DISPLAY=:99 
 RUN yum clean all 
 
 #RUN mkdir /data 
 #创建一个新的工作目录 
 WORKDIR /data 
 RUN mkdir -p /usr/share/fonts/chniese 

 # screenShootLinux：html转PNG图片程序
 COPY ./screenShootLinux /data 

 # 中文字体 从window电脑字体中拷贝
 COPY ./MSYHBD.TTC /usr/share/fonts/chniese 
 COPY ./MSYHL.TTC /usr/share/fonts/chniese 
 COPY ./MSYH.TTC /usr/share/fonts/chniese 
 
 CMD ["/usr/bin/bash"]

docker-compose.yaml

xvfb介绍

Xvfb(X Virtual Frame Buffer)是基于X Window的虚拟服务器,可以在没有物理显卡图形界面和人机交互界面的情况下,运行X Window相关应用程序.它模拟了一个完整的X Window系统,包括显示和输入设备,但一切都是在内存中进行处理,没有显示器和键盘.这使得测试和调试GUI应用程序变得更加容易和自动化.

启动X-Server命令

/usr/bin/Xvfb :99 -screen 0 1024x768x8 &

启动chrome（谷歌浏览器linux版本）

/usr/bin/google-chrome-stable --no-sandbox &

version: '3'  
    services: 
      centos_chrome: 
          build: 
              context: . 
              dockerfile: Dockerfile_centos 
          image: centos-chrome 
          container_name: centos_chrome 
          entrypoint: 
          - /bin/bash 
          - -c 
          - | 
              /usr/bin/Xvfb :99 -screen 0 1024x768x8 & 
              /usr/bin/google-chrome-stable --no-sandbox & 
              wait

构建镜像及启动容器

docker-compose up -d

html转png

HTML内容

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>简单HTML页面</title>

</head>

<body>

欢迎来到我的网页！

<p>这是一个简单的HTML页面示例。</p>

</body>

<script>

function getWh() {

return {"width":200,"height":200};

}

</script>

</html>

getWh() 用来设置png图片的宽高

截屏程序screenShotLinux

chromedp

基于Chrome DevTools协议的Go语言库：chromedp。该库提供了一种简单、高效、可靠的方式来控制Chrome浏览器进行自动化测试和爬取数据，它可以模拟用户在浏览器中执行各种操作，如点击、输入文本、截取网页长图、将网页内容转换成pdf文档、下载图片等，从而获取到需要采集的数据。项目地址： https://github.com/chromedp/chromedp

func main() {
    
    if htmlPath == "" {
        log.Println("html文件路径错误")
        return
    }

    if imgSavePath == "" {
        log.Println("img文件路径错误")
        return
    }

    var contextOption []chromedp.ContextOption
    if openDebug {
        contextOption = append(contextOption, chromedp.WithDebugf(log.Printf))
    }

  
    ctx, cancel := chromedp.NewContext(
        context.Background(),
        contextOption...,
        //chromedp.WithDebugf(log.Printf),
    )

    defer cancel()

    var getWidthHeight *runtime.RemoteObject

    var buf []byte

    err := chromedp.Run(
        ctx,
        chromedp.Tasks{
            chromedp.Navigate("file://" + htmlPath),
            chromedp.EvaluateAsDevTools(`getWh()`, &getWidthHeight, chromedp.EvalAsValue),
            chromedp.ActionFunc(func(ctx context.Context) error {
                type Value struct {
                    Width int64 `json:"width"`
                    Height int64 `json:"height"`
                }

                var tm Value
                if err := json.Unmarshal(getWidthHeight.Value,&tm); err != nil{
                    return err
                }

                chromedp.EmulateViewport(tm.Width,tm.Height).Do(ctx)
                return nil

                }),
                //chromedp.EmulateViewport(width,height),
                chromedp.FullScreenshot(&buf, imgQuality),
        },
    )


    imagePath := imgSavePath
    if err != nil || ioutil.WriteFile(imagePath, buf, 0o644) != nil {
        log.Fatal(err)
        return
    }

}