SpringBoot+zxing+Vue实现前端请求后台二维码图片 |
您所在的位置：网站首页 › 如何生成二维码文件发送微信 › SpringBoot+zxing+Vue实现前端请求后台二维码图片 |
SpringBoot+zxing+Vue实现前端请求后台二维码图片
|
场景
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的依赖 com.google.zxing core 3.3.3 com.google.zxing javase 3.3.3然后新键一个生成二维码的工具类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 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 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 hints = new HashMap() { 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控件来显示图片，默认此弹窗是隐藏 需要提前声明这些属性 data() { return { //返回的文件url fileUrl: "", dialogVisible:false, };然后页面新增一个按钮 app下载按钮的点击事件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)后
|
【本文地址】
今日新闻 |
推荐新闻 |