VUE+Springboot实现生成二维码及二维码下载功能

一、Springboot相关

1、pom依赖引入

<!-- 生成二维码 --><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>

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();
//            //设置透明  endg2.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 放置尾部logoResponse 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);//新建一个类型支持透明的BufferedImagefor(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弹出二维码页面

<el-dialog :title="title" :visible.sync="openLabel" :close-on-click-modal="false"><el-form ref="form" :model="form" :rules="rules" label-width="120px"><el-row v-show="false"><el-col><el-form-item label="电子标签码" prop="electronicLabelCode"><el-input v-model="form.electronicLabelCode" placeholder="请输入电子标签码" :disabled="isDisabled"/></el-form-item></el-col></el-row><el-row><el-col><el-form-item prop="file" ref="uploadElement" label="二维码"><el-uploadclass="avatar-uploader"action="#":show-file-list="false":disabled="true"><el-image v-if="dangerousImageUrl" :src="dangerousImageUrl" class="avatar"><div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div></el-image><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label=""><el-link @click="downloadQRCode" :disabled="isDisabled">下载二维码图片</el-link></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm" v-if="!isDisabled" v-show="false">保 存</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>

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在这方面的优势更明显。可以把整个多媒体页面保存为一个文件。

缺点：