杰瑞科技汇

Java如何用HTML生成图片?

核心思想

无论使用哪种技术,其核心思想都是一样的:

Java如何用HTML生成图片?-图1
(图片来源网络,侵删)
  1. 在 Java 代码中创建一个图片对象,这个对象可以在内存中创建,也可以从文件读取。
  2. 使用 Java 2D API (java.awtjava.awt.image) 在图片上绘制内容,如文字、形状、线条等。
  3. 将生成的图片对象转换为某种格式(最常用的是 PNG 或 JPEG),通常是字节数组 (byte[])。
  4. 在 HTML 中引用这张图片,有两种主要方式:
    • 内联 Base64:将图片的字节数组编码为 Base64 字符串,然后直接嵌入到 HTML 的 <img> 标签的 src 属性中。
    • 独立文件:将图片保存为服务器上的一个独立文件(如 image.png),然后在 HTML 中通过路径引用它(如 <img src="/path/to/image.png">)。

使用 Java 2D API 和 Base64 内联(最常用,最简单)

这种方法适合生成动态的、临时的图片,比如验证码、用户头像等,它不需要服务器配置文件上传或静态资源路径,图片数据完全包含在 HTML 响应中。

步骤:

  1. 创建 BufferedImage 对象:这是内存中的画布。
  2. 获取 Graphics2D 对象:这是画笔,用于在画布上绘制。
  3. :设置背景色、绘制文字、图形等。
  4. 将图片编码为 Base64 字符串
  5. 在 HTML 中使用 data: URI

Java 代码示例:

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.Base64;
public class ImageGenerator {
    public static String generateImageWithText(String text) {
        // 1. 创建一个 BufferedImage 对象 (画布)
        int width = 300;
        int height = 100;
        // TYPE_INT_ARGB 表示支持透明度
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
        // 2. 获取 Graphics2D 对象 (画笔)
        Graphics2D g2d = image.createGraphics();
        // 3. 绘制内容
        // 设置抗锯齿,使文字和图形更平滑
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        // 绘制背景色
        g2d.setColor(Color.WHITE);
        g2d.fillRect(0, 0, width, height);
        // 绘制边框
        g2d.setColor(Color.BLACK);
        g2d.drawRect(0, 0, width - 1, height - 1);
        // 设置字体
        Font font = new Font("Arial", Font.BOLD, 24);
        g2d.setFont(font);
        // 设置文字颜色
        g2d.setColor(Color.BLUE);
        // 计算文字位置使其居中
        FontMetrics fm = g2d.getFontMetrics();
        int x = (width - fm.stringWidth(text)) / 2;
        int y = (height - fm.getHeight()) / 2 + fm.getAscent();
        g2d.drawString(text, x, y);
        // 释放画笔资源
        g2d.dispose();
        // 4. 将图片编码为 Base64 字符串
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        try {
            // 使用 ImageIO 将图片写入字节数组流,格式为 PNG
            javax.imageio.ImageIO.write(image, "png", baos);
        } catch (IOException e) {
            e.printStackTrace();
            return ""; // 返回空字符串或错误信息
        }
        byte[] imageBytes = baos.toByteArray();
        String base64Image = Base64.getEncoder().encodeToString(imageBytes);
        // 5. 返回 data URI 格式的字符串
        return "data:image/png;base64," + base64Image;
    }
    public static void main(String[] args) {
        String imageSrc = generateImageWithText("Hello, Java Image!");
        System.out.println(imageSrc);
        // 假设你在一个 Web 框架(如 Spring Boot)中,你可以直接把这个字符串放到 Model 里
        // 然后在 Thymeleaf 或其他模板引擎中使用
    }
}

HTML 代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">Generated Image</title>
</head>
<body>
    <h1>动态生成的图片</h1>
    <!-- 直接使用 Java 代码生成的 data URI -->
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAgAElEQVR4nOzde3wU1Z3H8e+95117r3VXdVlVVVbVlVVVXVtWnV1VVVVVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVVVXVVVVVfXVVVdVV
分享:
扫描分享到社交APP
上一篇
下一篇