利用puppeteer将html网页生成图片

1.什么是puppeteer?

Puppeteer是一个Node库,它提供了一个高级API来通过DevTools协议控制Chromium或Chrome。 可以使用Puppeteer来自动化完成浏览器的操作,官方给出的一些使用场景如下:

  • 生成页面PDF
  • 抓取 SPA(单页应用)并生成预渲染内容(即"SSR"(服务器端渲染))
  • 自动提交表单,进行 UI 测试,键盘输入等
  • 创建一个时时更新的自动化测试环境,使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中执行测试
  • 捕获网站的timeline trace,用来帮助分析性能问题
  • 测试浏览器扩展

与Selenium比较

说起浏览器自动化操作,很容易联想到另一个自动化框架:Selenium。 但是Puppeteer与Selenium使用的协议却不一样! Puppeteer使用DevTools协议与Chome(或Chromium)进行交互,而Selenium却使用WebDriver协议与浏览器进行交互。 另外,他们各自的API在使用风格上也相差很多。

2.代码工程

实验目的:

实现html生成图片

pom.xml

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>springboot-demo</artifactId>
        <groupId>com.et</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>Puppeteer</artifactId>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

    </dependencies>
</project>

controller

复制代码
package com.et.puppeteer.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@Controller
public class HelloWorldController  {

   @RequestMapping(value = "/ftest")
   public String test(Model model) {
      model.addAttribute("msg", "use freemarker/  puppeteer to implement html generate image");
      model.addAttribute("img", "https://img1.baidu.com/it/u=3764156347,3722190225&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=419");
      return "f01";
   }


}

模版

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>freemarker</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
</head>
<body style="font-size: 20px;">
<div style="display: flex;
        align-items: flex-start;
        border: 1px solid darkred;
        box-shadow: 1px 2px 1px 5px #cccccc;"
>
    <div style="display:flex;flex-shrink: 0;width:100px;">words:</div> <h1>${msg}</h1>
</div>
<div style="display: flex;align-items: center;margin: 10px 0px;">
    <div>image: </div><img style="width: 150px;height: 150px;" src="${img}" />
</div>
<#--<div style="display: flex;align-items: flex-end;">-->
barcode: <svg id="barcode"></svg>
<#--</div>-->
</body>
<#--load js-->
<script>
    let e = document.getElementById("barcode");
    JsBarcode(e, "Hi world!");
</script>
</html>

html转图片

安装puppeteer

复制代码
npm i puppeteer

获取html并生成图片

复制代码
// index.js
const puppeteer = require('puppeteer');
async function test () {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({
        width: 960,
        height: 760,
        deviceScaleFactor: 1,
    });

    // await page.setContent(imgHTML);

    await page.goto('http://localhost:8088/ftest');

    await page.evaluate(() => {
        let e = document.getElementById("barcode");
        JsBarcode(e, "Hi world!");
    });

    await page.screenshot({path: "./example.png"});
    await browser.close();
}
test()

To capture a full page, we need to add a fullPage:true option for page.screenshot()

复制代码
  await page.screenshot({
    path: 'example.png',
    fullPage: true
  });

3.测试

  1. 启动Spring Boot程序
  2. 执行node index.js

4.引用

相关推荐
光而不耀@lgy3 分钟前
C++初登门槛
linux·开发语言·网络·c++·后端
Mr__Miss12 分钟前
面试踩过的坑
java·开发语言
爱喝一杯白开水13 分钟前
POI从入门到上手(一)-轻松完成Apache POI使用,完成Excel导入导出.
java·poi
方圆想当图灵22 分钟前
由 Mybatis 源码畅谈软件设计(七):SQL “染色” 拦截器实战
后端·mybatis·代码规范
向哆哆43 分钟前
Java 安全:如何防止 DDoS 攻击?
java·安全·ddos
啥都想学的又啥都不会的研究生1 小时前
Kubernetes in action-初相识
java·docker·微服务·容器·kubernetes·etcd·kubelet
毅航1 小时前
MyBatis 事务管理:一文掌握Mybatis事务管理核心逻辑
java·后端·mybatis
我的golang之路果然有问题1 小时前
速成GO访问sql,个人笔记
经验分享·笔记·后端·sql·golang·go·database
柏油1 小时前
MySql InnoDB 事务实现之 undo log 日志
数据库·后端·mysql
宝耶1 小时前
面试常问问题:Java基础篇
java·面试·职场和发展