Go语言Zero框架通过ChromeDP实现网页在线截图的设计与功能实现

Go语言Zero框架通过ChromeDP实现网页在线截图的设计与功能实现

引用

CSDN

1.

https://m.blog.csdn.net/qq_33665793/article/details/145243451

在GoZero框架中实现网页在线截图的功能，可以通过集成chromedp库来控制Chrome浏览器进行截图。chromedp是一个基于Chrome DevTools协议的Go包，可以用来在Go程序中模拟浏览器操作，如页面截图、DOM操作、表单提交等。

下面是一个设计方案，展示如何使用chromedp在GoZero中实现网页截图功能。

1. 项目设计

我们将创建一个GoZero服务，提供一个API接口，通过chromedp实现网页截图。主要组件包括：

• chromedp：用于控制浏览器进行截图。
• GoZero：作为API网关，处理客户端请求，并调用chromedp来生成截图。
• 接口设计：提供一个API接口，接收网页URL和一些截图参数，返回截图的图片。

2. 安装依赖

首先需要安装chromedp库以及GoZero框架。

go get github.com/chromedp/chromedp
go get github.com/tal-tech/go-zero

3. 实现步骤

3.1 创建截图功能

我们先使用chromedp实现截图功能，返回网页截图的二进制数据。

package main

import (
    "context"
    "fmt"
    "github.com/chromedp/chromedp"
    "golang.org/x/net/context"
    "io/ioutil"
    "log"
    "time"
)

// TakeScreenshot 截取网页并返回图片二进制数据
func TakeScreenshot(url string) ([]byte, error) {
    // 创建一个Chrome浏览器实例
    opts := append(chromedp.DefaultExecAllocatorOptions[:],
        chromedp.Flag("headless", true), // 无头浏览模式
        chromedp.Flag("disable-gpu", true),
        chromedp.Flag("no-sandbox", true),
    )
    allocCtx, cancel := chromedp.NewExecAllocator(context.Background(), opts...)
    defer cancel()
    // 创建一个新的浏览器会话
    ctx, cancel := chromedp.NewContext(allocCtx)
    defer cancel()
    // 设置浏览器超时时间
    ctx, cancel = context.WithTimeout(ctx, 30*time.Second)
    defer cancel()
    var buf []byte
    // 截图的目标操作：打开页面并截取网页
    err := chromedp.Run(ctx,
        chromedp.Navigate(url),
        chromedp.Sleep(2*time.Second), // 等待页面加载完成
        chromedp.CaptureScreenshot(&buf), // 截取页面
    )
    if err != nil {
        return nil, fmt.Errorf("failed to capture screenshot: %v", err)
    }
    return buf, nil
}

func main() {
    url := "https://www.example.com" // 你可以替换为任意网页URL
    img, err := TakeScreenshot(url)
    if err != nil {
        log.Fatalf("Error: %v", err)
    }
    // 将截图保存为本地文件
    err = ioutil.WriteFile("screenshot.png", img, 0644)
    if err != nil {
        log.Fatalf("Failed to save screenshot: %v", err)
    }
    log.Println("Screenshot saved successfully")
}

3.2 创建GoZero API接口

接下来，我们在GoZero中创建一个API接口，允许客户端传递URL参数并获取截图。

1. 创建API结构：我们需要一个请求结构体来接收URL和返回的图片数据。

// api/screenshot.api
type ScreenshotRequest struct {
    URL string `json:"url"`
}
type ScreenshotResponse struct {
    ImageData string `json:"image_data"`
}

2. API处理逻辑：在screenshot的处理函数中调用chromedp实现截图功能。

package handler

import (
    "context"
    "github.com/tal-tech/go-zero/rest/httpx"
    "your_project/api"
    "your_project/service"
    "net/http"
)

// ScreenshotHandler 处理网页截图请求
func ScreenshotHandler(ctx context.Context, w http.ResponseWriter, r *http.Request) {
    var req api.ScreenshotRequest
    if err := httpx.Parse(r, &req); err != nil {
        httpx.Error(w, err)
        return
    }
    // 调用截图服务
    imgData, err := service.TakeScreenshot(req.URL)
    if err != nil {
        httpx.Error(w, err)
        return
    }
    // 返回截图的Base64编码（或者返回二进制图片数据）
    httpx.OkJson(w, api.ScreenshotResponse{
        ImageData: "data:image/png;base64," + imgData,
    })
}

3. 服务层实现截图：将chromedp截图逻辑提取到服务层。

package service

import (
    "fmt"
    "github.com/chromedp/chromedp"
    "golang.org/x/net/context"
    "time"
)

// TakeScreenshot 截取网页并返回图片二进制数据
func TakeScreenshot(url string) (string, error) {
    opts := append(chromedp.DefaultExecAllocatorOptions[:],
        chromedp.Flag("headless", true),
        chromedp.Flag("disable-gpu", true),
        chromedp.Flag("no-sandbox", true),
    )
    allocCtx, cancel := chromedp.NewExecAllocator(context.Background(), opts...)
    defer cancel()
    ctx, cancel := chromedp.NewContext(allocCtx)
    defer cancel()
    // 设置浏览器超时时间
    ctx, cancel = context.WithTimeout(ctx, 30*time.Second)
    defer cancel()
    var buf []byte
    err := chromedp.Run(ctx,
        chromedp.Navigate(url),
        chromedp.Sleep(2*time.Second),
        chromedp.CaptureScreenshot(&buf),
    )
    if err != nil {
        return "", fmt.Errorf("failed to capture screenshot: %v", err)
    }
    // 将图片转成Base64编码并返回
    return base64.StdEncoding.EncodeToString(buf), nil
}

4. 注册路由：在main.go中设置API路由并启动服务。

package main

import (
    "github.com/tal-tech/go-zero/rest"
    "your_project/handler"
)

func main() {
    // 创建GoZero路由
    r := rest.NewRouter()
    // 注册网页截图接口
    r.Add("POST", "/api/screenshot", handler.ScreenshotHandler)
    // 启动服务
    r.Start(":8080")
}

4. 运行与测试

1. 启动GoZero服务：

go run main.go

2. 通过curl或者Postman向/api/screenshot发送请求，传递url参数：

curl -X POST http://localhost:8080/api/screenshot -d '{"url": "https://www.example.com"}' -H "Content-Type: application/json"

3. 如果一切正常，您将会得到返回的Base64编码的截图数据，或者直接返回图片文件。

5. 总结

• 我们利用chromedp来实现在GoZero框架中通过浏览器截图网页。
• 通过API接口，客户端传入网址，服务端处理后返回截图。
• chromedp可以通过无头浏览器模式，模拟真实用户浏览网页，完成截图操作。

这个方案具有很好的可扩展性，可以支持更多功能，比如截图尺寸调整、延时加载、设置代理等。