VUE+Springboot实现生成二维码及二维码下载功能
一、Springboot相关
1、pom依赖引入
com.google.zxing
core
3.3.0
com.google.zxing
javase
3.3.0
2、代码实现
import com.google.zxing.BarcodeFormat;
import com.google.zxing.WriterException;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.QRCodeWriter;
/**
* 生成图片二维码
*
* @param content 二维码内容
* @return
*/
private String buildQRCode(String content, String[] arr) {
ByteArrayOutputStream outputStream = null;
ByteArrayInputStream in = null;
ByteArrayOutputStream outputStream1 = null;
try {
QRCodeWriter qrCodeWriter = new QRCodeWriter();
BitMatrix bitMatrix = qrCodeWriter.encode(content, BarcodeFormat.QR_CODE, 1000, 1000);
//去掉二维码白边
int[] rec = bitMatrix.getEnclosingRectangle();
int resWidth = rec[2] + 1;
int resHeight = rec[3] + 1;
BitMatrix resMatrix = new BitMatrix(resWidth, resHeight);
resMatrix.clear();
for (int i = 0; i < resWidth; i++) {
for (int j = 0; j < resHeight; j++) {
if (bitMatrix.get(i + rec[0], j + rec[1]))
resMatrix.set(i, j);
}
}
//去掉二维码白边 结束
outputStream = new ByteArrayOutputStream();
MatrixToImageWriter.writeToStream(resMatrix, "PNG", outputStream);
int width = 1000;
int height = 1500;
outputStream1 = new ByteArrayOutputStream();
in = new ByteArrayInputStream(outputStream.toByteArray());
BufferedImage image = ImageIO.read(in);
BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = bi.createGraphics();
// //开始绘图 这版设置透明似乎有点点问题 暂时注掉
// g2.setBackground(Color.WHITE);
// g2.clearRect(0, 0, width, height);
// g2.setPaint(new Color(255, 255, 255,1)); //设置背景颜色
// g2.fillRect(0, 0, width, height); //填充颜色
//
// //设置透明 start
// bi = g2.getDeviceConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
// g2 = bi.createGraphics();
// //设置透明 end
g2.setBackground(Color.WHITE);
g2.clearRect(0, 0, width, height);
/** 设置生成图片的文字样式 * */
Font font = new Font("黑体", Font.BOLD, 80);
g2.setFont(font);
g2.setPaint(Color.BLACK);
//生成头部文字
/** 防止生成的文字带有锯齿 * */
g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
FontRenderContext context = g2.getFontRenderContext();
Rectangle2D bounds = font.getStringBounds(QR_CODE_HEAD_STR, context);
double headX = (width - bounds.getWidth()) / 2;
/** 在图片上生成文字 * */
g2.drawString(QR_CODE_HEAD_STR, (int) headX, 80);
g2.drawImage(image, 0, 165, width - 1, height - 520, null); //这里减去25是为了防止字和图重合
font = new Font("黑体", Font.BOLD, 60);
g2.setFont(font);
double i = 2.5;
for (String str : arr) {
/** 设置字体在图片中的位置 在这里是居中* */
context = g2.getFontRenderContext();
bounds = font.getStringBounds(str, context);
double x = (width - bounds.getWidth()) / 2;
double y = (height - 75 - bounds.getHeight());
double ascent = -bounds.getY() - bounds.getHeight() * i - 9 * i;
double baseY = y + ascent;
/** 防止生成的文字带有锯齿 * */
g2.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
/** 在图片上生成文字 * */
g2.drawString(str, (int) x, (int) baseY);
i--;
}
//todo 放置尾部logo
Response response = fileUploadFeignService.getFileInputStream("img/logopng.png");
BufferedImage tailImage = ImageIO.read(response.body().asInputStream());
//缩小图片尺寸
g2.drawImage(tailImage, (width - tailImage.getWidth() / 3) / 2 + 5, 1400, tailImage.getWidth() / 3, tailImage.getHeight() / 3, null);
int c = bi.getRGB(999, 1100);
BufferedImage tmpImg = new BufferedImage(width, height,BufferedImage.TYPE_4BYTE_ABGR);//新建一个类型支持透明的BufferedImage
for(int k = 0; k < width; ++k)//把原图片的内容复制到新的图片，同时把背景设为透明
{
for(int j = 0; j < height; ++j){
//把背景设为透明
if(bi.getRGB(k, j) == c){
tmpImg .setRGB(k, j, c & 0x00ffffff);
}
//设置透明度
else{
int rgb = tmpImg .getRGB(k, j);
rgb = ((10 * 255 / 10) << 24) | (rgb & 0x00ffffff);
tmpImg .setRGB(k, j, rgb);
}
}
}
g2.dispose();
ImageIO.write(tmpImg, "PNG", outputStream1);
Base64.Encoder encoder = Base64.getEncoder();
String text = encoder.encodeToString(outputStream1.toByteArray());
return text;
} catch (WriterException e) {
e.printStackTrace();
return "";
} catch (IOException e) {
e.printStackTrace();
return "";
} finally {
try {
if (outputStream != null) {
outputStream.close();
}
if (in != null) {
in.close();
}
if (outputStream1 != null) {
outputStream1.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}content:二维码内容
arr：二维码图片上要显示的内容
//todo 放置尾部logo
Response response = fileUploadFeignService.getFileInputStream("img/logopng.png");
3、controller调用‘
public AjaxResult getInfo()
{
AjaxResult ajax = AjaxResult.success();
ajax.put("img", "data:image/png;base64," + buildQRCode(qrCodeContent, qrCodeMessage.toArray(new String[qrCodeMessage.size()])));
}
return ajax;
}二、vue页面
1、vue弹出二维码页面
下载二维码图片
dangerousImageUrl ：
请求后端接口响应
this.dangerousImageUrl = response.img;
2、二维码图片下载
//二维码图片下载
downloadQRCode() {
let aLink = document.createElement('a');
let blob = this.base64ToBlob(this.dangerousImageUrl); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = "group_" + new Date().getTime() + ".png";
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
aLink.click();
},
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
},三、data: image/png； base64 用法详解
data:image/png;base64, 字符串... 这个表示什么意思，又有什么作用呢？
其实这就是所谓的 Data URI scheme。 直译过来的意思是：URI 数据处理方案...
1. Data URI scheme 是什么 ？
1）Data URI scheme 是在 RFC2397 中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。减少对 HTTP 的请求次数。达到优化网页的效果。
2）base64 后面那一串字符，其实是一张图片，将这些字符串复制粘贴到浏览器的中打开，就能看到图片了
2. Data URI scheme 的语法
在上面的 Data URI scheme 中：
data 表示取得数据的协定名称；
image/png 是数据类型名称；
base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
目前，Data URI scheme支持的类型有：
data: 文本数据
data: text/plain, ------- 文本数据
data: text/html, -------- HTML代码
data: text/html;base64, -------- base64编码的HTML代码
data: text/css, ---------- CSS代码
data: text/css;base64, ---------- base64编码的CSS代码
data: text/javascript, ------------ Javascript代码
data: text/javascript;base64, --------- base64编码的Javascript代码
data: image/gif;base64, ---------------- base64编码的gif图片数据
data: image/png;base64, -------------- base64编码的png图片数据
data: image/jpeg;base64, ------------- base64编码的jpeg图片数据
data: image/x-icon;base64, ---------- base64编码的icon图片数据3. Data URI scheme 的优缺点
优点：
减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。 对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。可以把整个多媒体页面保存为一个文件。
缺点：
- 无法被重复利用，同一个文档多次被应用到同一内容中，数据被大量增加，消耗了下载时间。
- 无法被独自缓存，其包含文档重新加载时，它也要重新加载。
- 耗时，客户端需要重新解码和显示，增加消耗。
- 不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多
- 不安全，不利于安全软件的过滤，同时也存在一定的安全隐患。