Base64 在支付二维码中的应用
在支付宝、微信等支付场景中,后端常需将生成的二维码以 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 世界畅通无阻。合理使用,既能简化流程,又能保障体验。
版权所有
版权归属:念宇
