后端生成二维码,Base64后,前端直接使用
开放中,可能会遇到生成二维码
的时候,这个时候,可以前端生成,也可以后端生成。
这时候,就可以看,把压力放在哪比较好。
当二维码信息比较小,或者前端迭代比较困难的时候(APP发布),就可以选择后端生成二维码。
二维码这种图片,一般比较小,可直接生成,要是再放到文件服务器,未免有些多余,不如直接返回给前端。
但是,如果返回文件流的话,前后端都不太好操作,并且可能因为网络原因,导致文件流损坏,但是Base64
后,作为一个字段返回给前端,结构清晰,前端也好操作。
一.后端工具类
此工具类用到Hutool工具类和Google二维码包(zxing)
1.依赖
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>core</artifactId>
<version>3.3.0</version>
</dependency>
<dependency>
<groupId>com.google.zxing</groupId>
<artifactId>javase</artifactId>
<version>3.3.0</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>4.5.16</version>
</dependency>
import cn.hutool.core.codec.Base64;
import cn.hutool.core.img.ImgUtil;
import cn.hutool.extra.qrcode.QrCodeUtil;
import cn.hutool.extra.qrcode.QrConfig;
import java.awt.*;
import java.io.ByteArrayOutputStream;
public class QRCodeUtil {
public static String getQRCodeBase64(String text, int width, int height) {
QrConfig config = new QrConfig(width, height);
config.setMargin(1);
config.setForeColor(Color.BLACK.getRGB());
config.setBackColor(Color.WHITE.getRGB());
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
QrCodeUtil.generate(text, config, ImgUtil.IMAGE_TYPE_PNG, outputStream);
byte[] pngData = outputStream.toByteArray();
return "data:image/png;base64," + Base64.encode(pngData);
}
public static String getQRCodeBase64(String text, QrConfig config) {
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
QrCodeUtil.generate(text, config, ImgUtil.IMAGE_TYPE_PNG, outputStream);
byte[] pngData = outputStream.toByteArray();
return "data:image/png;base64," + Base64.encode(pngData);
}
public static void main(String[] args) {
QrConfig config = new QrConfig(100, 100);
config.setMargin(3);
config.setForeColor(Color.CYAN.getRGB());
config.setBackColor(Color.GRAY.getRGB());
ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
QrCodeUtil.generate("wawaw", config, ImgUtil.IMAGE_TYPE_PNG, outputStream);
byte[] pngData = outputStream.toByteArray();
System.out.println(Base64.encode(pngData));
}
}
二.前端显示
前端可直接显示
<img src="data:image/png;base64,iVBORwAANSU......VORK5CYII=" />