使用chromedp实现网页截图及环境搭建

chromedp支持Chrome DevTools协议的更快，更简单的,无依赖.

安装谷歌浏览器

获取ubuntu环境,本机安装软件,自行加上sudo

获取容器

docker run -itd --name ubuntu-chrome ubuntu:latest


进入容器

docker exec -i -t  ubuntu-chrome  /bin/bash

安装谷歌浏览器

当然你也可以采用现有的chromedp--headlessdocker镜像,这里为了学习.

apt-get update


apt-get install -y wget gnupg2 vim

# 增加下载源
wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/

# 导入公钥
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub  | apt-key add - 

# 安装

apt-get update

apt-get install -y  google-chrome-stable 

# 以--no-sandbox模式运行
google-chrome-stable --headless --disable-gpu --no-sandbox --screenshot https://www.baidu.com/

安装golang

卸载旧版

apt-get remove golang-go
apt-get remove --auto-remove golang-go

安装go

wget https://studygolang.com/dl/golang/go1.13.4.linux-amd64.tar.gz
tar -zxvf go1.13.4.linux-amd64.tar.gz
mv go /usr/local/

配置

vim ~/.bashrc

export GOROOT=/usr/local/go         
export GOPATH=$HOME/go     
export GOBIN=$GOPATH/bin       
export PATH=$GOPATH:$GOBIN:$GOROOT/bin:$PATH      
export GO111MODULE=auto
export GOPROXY=https://goproxy.io,direct

重载境变量

source ~/.bashrc

测试

# go version 
go version go1.13.4 linux/amd64

chromedp安装使用

常见目录,新建go文件

mkdir test.chromedp

cd test.chromedp/

go mod init test.chromedp

vim main.go

文件内容

import (
    "context"
    "io/ioutil"
    "log"

    "github.com/chromedp/chromedp"
    "github.com/chromedp/chromedp/device"
)

func main() {

    // create context
    ctx, cancel := chromedp.NewContext(context.Background())
    defer cancel()

    // run
    var b1, b2 []byte
    if err := chromedp.Run(ctx,
        // emulate iPhone 7 landscape
        chromedp.Emulate(device.IPhone8Plus),
        chromedp.Navigate(`https://www.baidu.com/`),
        chromedp.CaptureScreenshot(&b1),

        // reset
        chromedp.Emulate(device.Reset),

        // set really large viewport
        chromedp.EmulateViewport(1920, 2000),
        chromedp.Navigate(`https://www.baidu.com/`),
        chromedp.CaptureScreenshot(&b2),
    ); err != nil {
        log.Fatal(err)
    }

    if err := ioutil.WriteFile("baidu_IPhone8Plus.png", b1, 0777); err != nil {
        log.Fatal(err)
    }
    if err := ioutil.WriteFile("baidu_PC.png", b2, 0777); err != nil {
        log.Fatal(err)
    }
}

执行结果

go run main.go 
root@a7b848034a8e:/data/golang.code/test.chromedp# ls
baidu_IPhone8Plus.png  baidu_PC.png  go.mod  go.sum  main.go

测试截图已经在目录中.

我们可以预览一下

image.png

image.png

当然你也可以操作页面元素,cookie,JavaScript等常用功能,这里不在细说了.

有疑问加站长微信联系（非本文作者）