场景

ZXing是一个开源的，用Java实现的多种格式的1D/2D条码图像处理库。

github地址：

https://github.com/zxing/zxing

若依微服务版手把手教你本地搭建环境并运行前后端项目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109363303

在上面搭建起来SpringBoot+Vue的前后端分离的项目的基础上，要实现前端点击按钮请求后台，

后台将需要的内容，比如是最新版的app下载地址等生成二维码，然后返回给前端，前端显示的效果。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

SpringBoot后台

首选在项目的pom.xml中引入xing的依赖

        <!-- zxing生成二维码 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.3.3</version></dependency><dependency><groupId>com.google.zxing</groupId><artifactId>javase</artifactId><version>3.3.3</version></dependency>

然后新键一个生成二维码的工具类QRCodeUtil

import com.google.zxing.*;
import com.google.zxing.client.j2se.BufferedImageLuminanceSource;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.common.HybridBinarizer;
import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
import lombok.extern.slf4j.Slf4j;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;import javax.imageio.ImageIO;
import javax.swing.filechooser.FileSystemView;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.io.OutputStream;
import java.net.URL;
import java.util.*;@Component
@Slf4j
public class QRCodeUtil {private static final Logger log = LoggerFactory.getLogger(QRCodeUtil.class);/*** CODE_WIDTH：二维码宽度，单位像素* CODE_HEIGHT：二维码高度，单位像素* FRONT_COLOR：二维码前景色，0x000000 表示黑色* BACKGROUND_COLOR：二维码背景色，0xFFFFFF 表示白色* 演示用 16 进制表示，和前端页面 CSS 的取色是一样的，注意前后景颜色应该对比明显，如常见的黑白*/private static final int CODE_WIDTH = 400;private static final int CODE_HEIGHT = 400;private static final int FRONT_COLOR = 0x000000;private static final int BACKGROUND_COLOR = 0xFFFFFF;/*** @param codeContent        二维码参数内容，如果是一个网页地址，如 https://www.baidu.com/ 则 微信扫一扫会直接进入此地址， 如果是一些参数，如*                           1541656080837，则微信扫一扫会直接回显这些参数值* @param codeImgFileSaveDir 二维码图片保存的目录,如 D:/codes* @param fileName           二维码图片文件名称，带格式,如 123.png*/public static void createCodeToFile(String codeContent, File codeImgFileSaveDir, String fileName) {try {if (codeContent == null || "".equals(codeContent)) {log.info("二维码内容为空，不进行操作...");return;}codeContent = codeContent.trim();if (codeImgFileSaveDir == null || codeImgFileSaveDir.isFile()) {codeImgFileSaveDir = FileSystemView.getFileSystemView().getHomeDirectory();log.info("二维码图片存在目录为空，默认放在桌面...");}if (!codeImgFileSaveDir.exists()) {codeImgFileSaveDir.mkdirs();log.info("二维码图片存在目录不存在，开始创建...");}if (fileName == null || "".equals(fileName)) {fileName = new Date().getTime() + ".png";log.info("二维码图片文件名为空，随机生成 png 格式图片...");}BufferedImage bufferedImage = getBufferedImage(codeContent);/** javax.imageio.ImageIO：java扩展的图像IO* write(RenderedImage im, String formatName, File output)*       im：待写入的图像， formatName：图像写入的格式，output：写入的图像文件，文件不存在时会自动创建*/File codeImgFile = new File(codeImgFileSaveDir, fileName);ImageIO.write(bufferedImage, "png", codeImgFile);log.info("二维码图片生成成功：" + codeImgFile.getPath());} catch (Exception e) {e.printStackTrace();}}/*** 生成二维码并输出到输出流, 通常用于输出到网页上进行显示* 输出到网页与输出到磁盘上的文件中，区别在于最后一句 ImageIO.write* write(RenderedImage im,String formatName,File output)：写到文件中* write(RenderedImage im,String formatName,OutputStream output)：输出到输出流中** @param codeContent  ：二维码内容* @param outputStream ：输出流，比如 HttpServletResponse 的 getOutputStream*/public static void createCodeToOutputStream(String codeContent, OutputStream outputStream) {try {if (codeContent == null || "".equals(codeContent.trim())) {log.info("二维码内容为空，不进行操作...");return;}codeContent = codeContent.trim();BufferedImage bufferedImage = getBufferedImage(codeContent);/** 区别就是以一句，输出到输出流中，如果第三个参数是 File，则输出到文件中*/ImageIO.write(bufferedImage, "png", outputStream);log.info("二维码图片生成到输出流成功...");} catch (Exception e) {e.printStackTrace();log.error("发生错误: {}!", e.getMessage());}}private static BufferedImage getBufferedImage(String codeContent) throws WriterException {/** com.google.zxing.EncodeHintType：编码提示类型,枚举类型* EncodeHintType.CHARACTER_SET：设置字符编码类型* EncodeHintType.ERROR_CORRECTION：设置误差校正* ErrorCorrectionLevel：误差校正等级，L = ~7% correction、M = ~15% correction、Q = ~25% correction、H = ~30% correction*   不设置时，默认为 L 等级，等级不一样，生成的图案不同，但扫描的结果是一样的* EncodeHintType.MARGIN：设置二维码边距，单位像素，值越小，二维码距离四周越近*/Map<EncodeHintType, Object> hints = new HashMap();hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);hints.put(EncodeHintType.MARGIN, 1);/** MultiFormatWriter:多格式写入，这是一个工厂类，里面重载了两个 encode 方法，用于写入条形码或二维码*      encode(String contents,BarcodeFormat format,int width, int height,Map<EncodeHintType,?> hints)*      contents:条形码/二维码内容*      format：编码类型，如 条形码，二维码 等*      width：码的宽度*      height：码的高度*      hints：码内容的编码类型* BarcodeFormat：枚举该程序包已知的条形码格式，即创建何种码，如 1 维的条形码，2 维的二维码 等* BitMatrix：位(比特)矩阵或叫2D矩阵，也就是需要的二维码*/MultiFormatWriter multiFormatWriter = new MultiFormatWriter();BitMatrix bitMatrix = multiFormatWriter.encode(codeContent, BarcodeFormat.QR_CODE, CODE_WIDTH, CODE_HEIGHT, hints);/** java.awt.image.BufferedImage：具有图像数据的可访问缓冲图像，实现了 RenderedImage 接口* BitMatrix 的 get(int x, int y) 获取比特矩阵内容，指定位置有值，则返回true，将其设置为前景色，否则设置为背景色* BufferedImage 的 setRGB(int x, int y, int rgb) 方法设置图像像素*      x：像素位置的横坐标，即列*      y：像素位置的纵坐标，即行*      rgb：像素的值，采用 16 进制,如 0xFFFFFF 白色*/BufferedImage bufferedImage = new BufferedImage(CODE_WIDTH, CODE_HEIGHT, BufferedImage.TYPE_INT_BGR);for (int x = 0; x < CODE_WIDTH; x++) {for (int y = 0; y < CODE_HEIGHT; y++) {bufferedImage.setRGB(x, y, bitMatrix.get(x, y) ? FRONT_COLOR : BACKGROUND_COLOR);}}return bufferedImage;}/*** 根据本地二维码图片解析二维码内容 注：图片必须是二维码图片，但也可以是微信用户二维码名片，上面有名称、头像也是可以的）** @param file 本地二维码图片文件,如 E:\\logs\\2.jpg* @return* @throws Exception*/public static String parseQRCodeByFile(File file) {String resultStr = null;if (file == null || file.isDirectory() || !file.exists()) {return resultStr;}try {/** ImageIO的BufferedImage read(URL input)方法用于读取网络图片文件转为内存缓冲图像* 同理还有：read(File input)、read(InputStream input)、、read(ImageInputStream stream)*/BufferedImage bufferedImage = ImageIO.read(file);/** com.google.zxing.client.j2se.BufferedImageLuminanceSource：缓冲图像亮度源* 将 java.awt.image.BufferedImage 转为 zxing 的 缓冲图像亮度源* 关键就是下面这几句：HybridBinarizer 用于读取二维码图像数据，BinaryBitmap 二进制位图*/BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(bufferedImage);BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));Hashtable hints = new Hashtable();hints.put(DecodeHintType.CHARACTER_SET, "UTF-8");/** 如果图片不是二维码图片，则 decode 抛异常：com.google.zxing.NotFoundException* MultiFormatWriter 的 encode 用于对内容进行编码成 2D 矩阵* MultiFormatReader 的 decode 用于读取二进制位图数据*/Result result = new MultiFormatReader().decode(bitmap, hints);resultStr = result.getText();} catch (IOException e) {e.printStackTrace();} catch (NotFoundException e) {e.printStackTrace();log.error("图片非二维码图片, 路径是: {}!", file.getPath());}return resultStr;}/*** 根据网络二维码图片解析二维码内容, 区别仅仅在于 ImageIO.read(url); 这一个重载的方法）** @param url 二维码图片网络地址，如 https://res.wx.qq.com/mpres/htmledition/images/mp_qrcode3a7b38.gif* @return* @throws Exception*/public static String parseQRCodeByUrl(URL url) {String resultStr = null;if (url == null) {return resultStr;}try {/** ImageIO 的 BufferedImage read(URL input) 方法用于读取网络图片文件转为内存缓冲图像* 同理还有：read(File input)、read(InputStream input)、、read(ImageInputStream stream)* 如果图片网络地址错误，比如不能访问，则 read 抛异常：javax.imageio.IIOException: Can't get input stream from URL!*/BufferedImage bufferedImage = ImageIO.read(url);/** com.google.zxing.client.j2se.BufferedImageLuminanceSource：缓冲图像亮度源* 将 java.awt.image.BufferedImage 转为 zxing 的 缓冲图像亮度源* 关键就是下面这几句：HybridBinarizer 用于读取二维码图像数据，BinaryBitmap 二进制位图*/BufferedImageLuminanceSource source = new BufferedImageLuminanceSource(bufferedImage);BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));Hashtable hints = new Hashtable();/** 如果内容包含中文，则解码的字符集格式应该和编码时一致*/hints.put(DecodeHintType.CHARACTER_SET, "UTF-8");/** 如果图片不是二维码图片，则 decode 抛异常：com.google.zxing.NotFoundException* MultiFormatWriter 的 encode 用于对内容进行编码成 2D 矩阵* MultiFormatReader 的 decode 用于读取二进制位图数据*/Result result = new MultiFormatReader().decode(bitmap, hints);resultStr = result.getText();} catch (IOException e) {e.printStackTrace();log.error("二维码图片地址错误, 地址是: {}!", url);} catch (NotFoundException e) {e.printStackTrace();log.error("图片非二维码图片, 地址是: {}!", url);}return resultStr;}private static final int QRCOLOR = 0xFF000000; // 默认是黑色private static final int BGWHITE = 0xFFFFFFFF; // 背景颜色private static final int WIDTH = 400; // 二维码宽private static final int HEIGHT = 400; // 二维码高// 用于设置QR二维码参数private static Map<EncodeHintType, Object> hints = new HashMap<EncodeHintType, Object>() {private static final long serialVersionUID = 1L;{put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);// 设置QR二维码的纠错级别（H为最高级别）具体级别信息put(EncodeHintType.CHARACTER_SET, "utf-8");// 设置编码方式}};// 生成带logo的二维码图片public static void drawLogoQRCode(File logoFile, OutputStream outputStream, String qrUrl) {try {MultiFormatWriter multiFormatWriter = new MultiFormatWriter();// 参数顺序分别为：编码内容，编码类型，生成图片宽度，生成图片高度，设置参数BitMatrix bm = multiFormatWriter.encode(qrUrl, BarcodeFormat.QR_CODE, WIDTH, HEIGHT, hints);BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);// 开始利用二维码数据创建Bitmap图片，分别设为黑（0xFFFFFFFF）白（0xFF000000）两色for (int x = 0; x < WIDTH; x++) {for (int y = 0; y < HEIGHT; y++) {image.setRGB(x, y, bm.get(x, y) ? QRCOLOR : BGWHITE);}}int width = image.getWidth();int height = image.getHeight();if (Objects.nonNull(logoFile) && logoFile.exists()) {// 构建绘图对象Graphics2D g = image.createGraphics();// 读取Logo图片BufferedImage logo = ImageIO.read(logoFile);// 开始绘制logo图片g.drawImage(logo, width * 2 / 5, height * 2 / 5, width * 2 / 10, height * 2 / 10, null);g.dispose();logo.flush();}image.flush();/** 区别就是以一句，输出到输出流中，如果第三个参数是 File，则输出到文件中*/ImageIO.write(image, "png", outputStream);} catch (Exception e) {e.printStackTrace();}}
}

然后新建一个Controller，再新建一个接口方法

    @GetMapping("/qrcode")public void getQRCode(HttpServletResponse response) throws Exception {SysAppVersion sysAppVersion = appVersionService.getLast();String downloadpath = sysAppVersion.getDownloadLink();/*下载路径*/try {/** 调用工具类生成二维码并输出到输出流中*/QRCodeUtil.createCodeToOutputStream(downloadpath, response.getOutputStream());log.info("成功生成二维码!");} catch (IOException e) {log.error("发生错误， 错误信息是：{}！", e.getMessage());}}

在接口方法中将要在二维码显示的内容调用QRCodeUtil.createCodeToOutputStream设置，这个方法将二维码输出到输出流。

方法说明：

生成二维码并输出到输出流, 通常用于输出到网页上进行显示
输出到网页与输出到磁盘上的文件中，区别在于最后一句 ImageIO.write
write(RenderedImage im,String formatName,File output)：写到文件中
write(RenderedImage im,String formatName,OutputStream output)：输出到输出流中

这个工具类除了生成普通的二维码，还可以生成带log的二维码，具体看工具类的方法说明。

前端Vue

在页面上新增一个弹窗，弹窗里面用el-image控件来显示图片，默认此弹窗是隐藏

      <el-dialogtitle="请扫描二维码下载"width="15%":visible.sync="dialogVisible":before-close="handleClose"><el-imagestyle="width: 150px; height: 150px":src="fitUrl":fit="fit"></el-image></el-dialog>

需要提前声明这些属性

  data() {return {//返回的文件urlfileUrl: "",dialogVisible:false,};

然后页面新增一个按钮

        <el-buttontype="primary"icon="el-icon-download"size="mini"@click="downApp">app下载</el-button>

按钮的点击事件downApp中

    downApp(){downAppImage().then((val) => {const src=window.URL.createObjectURL(val)this.fitUrl=src;this.dialogVisible=true;})}

调用了downAppImage方法，并获取其响应值val,然后通过window.URL.createObjectURL(val)

获取图片预览地址，并将其赋值给el-image的图片数据源变量fitUrl，然后让窗口显示。

其中downAppImage是通过

import { downAppImage } from "@/api/tool/edition.js";

引入的js的方法

    export function downAppImage(){return request({url: '/download/qrcode',method:'get',responseType:"blob"})}

这个方法会去调用前面SpringBoot的后台接口，注意这里的响应类型为blob

然后window.URL.createObjectURL说明：

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

效果

调用后台接口，后台会生成二维码图片的响应流

然后前端调用接口

调用window.URL.createObjectURL(val)后

SpringBoot+zxing+Vue实现前端请求后台二维码图片相关推荐

【vue】链接生成为二维码图片-qrcode.js2
通过qrcode.js2将链接生成为二维码图片 npm下载包 npm i qrcode.js2 Demo <template><div ref='qrcode'></di ...
vue解析后端返回的二维码图片数据流
问题场景: 后端返回图片数据流,打印结果是乱码,如下: Chrome浏览器的preview中可以看到二维码(图片),如下: 解析思路: 尝试用二进制大对象Blob解析,然后生成图片的URL,代码如下: ...
vue websocket 公众号扫描二维码登录PC端
首先使用的是websocket进行消息的传递,当我们在pc端请求到二维码图片后,打开微信扫一扫,扫描二维码后,就可以在websocket里接收到扫描消息,然后进行自己的业务逻辑处理,具体代码如下: w ...
在页面点击“生成二维码”，直接把二维码图片下载下来
在页面设置一个"生成二维码"按钮,点击按钮,调用后台生成一个二维码图片,直接在浏览器下载下来. 生成二维码工具类QRCodeUtil.java:这个工具类需要导入依赖 <!- ...
java完整的利用itext5制作pdf、二维码图片插入pdf，并解析pdf中的二维码信息
利用itext5.zxing.QRCore制作pdf.二维码图片插入pdf,并解析pdf中的二维码信息,手机可以实现扫描获取二维码的信息,并进行验证你的解析是否正确. 先是生成二维码图片并插入pdf中 ...
Java生成二维码并以IO流的形式返回给前端展示(不需写入服务器)，以及下载二维码图片
目录场景方案分析第一步--引入依赖第二步--编写工具类第三步--编写API接口第四步--访问测试第五步--下载图片场景最近笔者做的项目中,有一个需求: 在系统中生成一个二维码,用户保 ...
Spring Boot电商项目57：订单模块六：【前台：生成支付二维码】接口；（支付url的拼凑；利用zxing生成二维码；二维码图片的存储；真实地址与可访问地址的转换；）
说明: (1)本篇博客主要内容是:开发[前台:生成支付二维码]接口: (2)本篇博客需要注意的点有: ● 支付url的拼凑: ● 利用zxing生成二维码: ● 二维码图片的存储:真实地址与可访问地址 ...
springboot+java生成二维码图片
接下来将从IDEA创建springboot项目到生成效果图详细地为大家展示二维码的制作过程 1.首先是创建springboot项目上面的图有红色标记的地方需要填写的,比如项目存放的路径,包名等,其他 ...
Java分别使用zxing及qrcode-plugin生成各种样式二维码
二维码二维条形码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息. 二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动 ...

SpringBoot+zxing+Vue实现前端请求后台二维码图片

场景

实现

SpringBoot后台

前端Vue

效果

SpringBoot+zxing+Vue实现前端请求后台二维码图片相关推荐

最新文章

热门文章