在支付宝、微信等支付场景中，后端常需将生成的二维码以 Base64 字符串 形式返回给前端。用 Java、PHP 两种语言生成支付二维码 Base64，并通过 Vue 前端安全渲染，实现一次接口调用即可展示支付码！

为什么用 Base64？

• 痛点：HTTP 接口通常基于 JSON，而 JSON 只能传输文本
• 解决方案：将二进制图片（如 PNG 二维码）编码为 Base64 字符串，嵌入 JSON
• 前端使用：img src="data:image/png;base64,xxx" 直接渲染，无需额外请求

java生成二维码Base64

1.添加maven依赖
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.5.2</version>
</dependency>
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>javase</artifactId>
    <version>3.5.2</version>
</dependency>


2.生成二维码类
import com.google.zxing.BarcodeFormat;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;

import java.io.ByteArrayOutputStream;
import java.util.Base64;

public class QRCodeUtil {

    public static String generateQRCodeBase64(String content, int width, int height) {
        try {
            QRCodeWriter writer = new QRCodeWriter();
            BitMatrix bitMatrix = writer.encode(content, BarcodeFormat.QR_CODE, width, height);
            ByteArrayOutputStream out = new ByteArrayOutputStream();
            MatrixToImageWriter.writeToStream(bitMatrix, "PNG", out);
            byte[] imageBytes = out.toByteArray();
            String base64 = Base64.getEncoder().encodeToString(imageBytes);
            return "data:image/png;base64," + base64;
        } catch (Exception e) {
            throw new RuntimeException("生成二维码失败", e);
        }
    }
}

@RestController
public class PayController {

    @GetMapping("/api/pay/qr")
    public Map<String, String> getPayQrCode() {
        String payUrl = "https://example.com/pay?order_id=12345";
        String qrBase64 = QRCodeUtil.generateQRCodeBase64(payUrl, 300, 300);
        return Map.of("qr_code", qrBase64);
    }
}

返回参数
{
  "qr_code": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASw..."
}

php生成Base64二维码

<?php
// qrcode.php

function generateQRCodeBase64($text, $size = 300) {
    // 使用 Google Chart API 快速生成（仅演示，生产建议用本地库如 endroid/qr-code）
    // 或使用本地库：composer require endroid/qr-code

    // 方案1：调用在线服务（不推荐用于生产）
    // $url = 'https://chart.googleapis.com/chart?cht=qr&chs=' . $size . 'x' . $size . '&chl=' . urlencode($text);
    // $imageData = file_get_contents($url);

    // 方案2：使用 endroid/qr-code（推荐）
    // 这里简化为使用在线服务仅作演示
    $chartUrl = "https://quickchart.io/qr?text=" . urlencode($text) . "&size=" . $size;
    $imageData = file_get_contents($chartUrl);

    if ($imageData === false) {
        http_response_code(500);
        echo json_encode(['error' => 'Failed to generate QR']);
        exit;
    }

    $base64 = 'data:image/png;base64,' . base64_encode($imageData);
    return $base64;
}

header('Content-Type: application/json');
$payUrl = "https://example.com/pay?order_id=12345";
echo json_encode([
    'qr_code' => generateQRCodeBase64($payUrl, 300)
]);

Vue3

<template>
  <div class="pay-container">
    <h2>请扫码支付</h2>
    <img
        v-if="qrCode"
        :src="qrCode"
        alt="支付二维码"
        style="width: 200px; height: 200px;"
    />
    <p v-else>加载中...</p>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  const qrCode = ref('')

  onMounted(async () => {
    try {
      const res = await fetch('/api/pay/qr') // 替换为你的后端地址
      const data = await res.json()
      qrCode.value = data.qr_code
    } catch (err) {
      console.error('获取二维码失败', err)
    }
  })
</script>

重要

Base64 让二进制“穿上文本外衣”，在 JSON 世界畅通无阻。合理使用，既能简化流程，又能保障体验。

版权所有

版权归属：念宇

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)