【uniapp：二维码生成和扫描】

---

前言

提示：uniapp + springboot 二维码生成和扫描：

使用uniapp + springboot 框架，实现二维码生成和扫描二维码功能。
兼容H5、小程序、app端。

---

提示：以下是本篇文章正文内容，下面案例可供参考

代码部分

一、后端

1. pom.xml引入库

pom.xml添加以下依赖：

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

2. springboot后端生成二维码——QRCodeController.java

package cn.iocoder.hwb.module.system.controller.admin.qrcode;

import cn.iocoder.hwb.framework.common.pojo.CommonResult;
import com.google.zxing.BarcodeFormat;
import com.google.zxing.EncodeHintType;
import com.google.zxing.MultiFormatWriter;
import com.google.zxing.WriterException;
import com.google.zxing.client.j2se.MatrixToImageWriter;
import com.google.zxing.common.BitMatrix;
import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.imageio.ImageIO;

import static cn.iocoder.hwb.framework.common.pojo.CommonResult.success;

@RestController
public class QRCodeController {

     /**
     *
     * 扫描二维码 1.1 
     * @param text
     * @return
     */
    @GetMapping("/api/qrcode")
    public CommonResult<byte[]> generateQRCode(@RequestParam String text) {
        try {
            // 设置二维码参数
            Map<EncodeHintType, Object> hints = new HashMap<>();
            hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);
            hints.put(EncodeHintType.CHARACTER_SET, "UTF-8"); // 指定字符集


            // 生成二维码矩阵
            BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, 300, 300, hints);

            // 转换为BufferedImage
            BufferedImage image = MatrixToImageWriter.toBufferedImage(bitMatrix);

            // 将BufferedImage转换为byte数组，并返回给前端
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(image, "PNG", baos);
            byte[] imageBytes = baos.toByteArray();
            return success(imageBytes);


        } catch (WriterException | IOException e) {
            e.printStackTrace();
            return null;
        }


    }



    /**
     *
     * 扫描二维码 1.2
     * @param text
     * @return
     */
    @GetMapping("/api/qrcode")
    public CommonResult<byte[]> generateQRCode(@RequestParam String text) {
        try {
            // 生成二维码图片
            byte[] imageBytes = generateQRCodeImage(text);
            return success(imageBytes);
        } catch (Exception e) {
            // 捕获所有异常，并返回带有错误信息的CommonResult对象
            e.printStackTrace(); // 或者使用日志记录器记录异常
            return error("Failed to generate QR code", e.getMessage());
        }
    }

    private byte[] generateQRCodeImage(String text) throws WriterException, IOException {
        // 设置二维码参数
        Map<EncodeHintType, Object> hints = new HashMap<>();
        hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);
        hints.put(EncodeHintType.CHARACTER_SET, "UTF-8"); // 指定字符集

        // 生成二维码矩阵
        BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, 300, 300, hints);

        // 转换为BufferedImage
        BufferedImage image = MatrixToImageWriter.toBufferedImage(bitMatrix);

        // 将BufferedImage转换为byte数组
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(image, "PNG", baos);
        byte[] imageBytes = baos.toByteArray();
        baos.close(); // 关闭流  
        return imageBytes;
    }
}

二、前端

1. 在package.json中引入前端依赖库

{
"dependencies": {
    "axios": "^1.6.7",
    "crypto-js": "^4.0.0",
    "html5-qrcode": "^2.3.8",
    "image-tools": "^1.4.0",
    "qrcodejs2-fix": "^0.0.1",
    "sm-crypto": "^0.3.13",
    "weixin-jsapi": "^1.1.0"
  },
}

2. 创建qrcode.js文件，配置调用后端api接口

import upload from '@/utils/upload'
import request from '@/utils/request'

// 生成二维码
export function generateQRCode(text) {  
    return request({  
      url: '/api/qrcode', // 后端API地址  
      method: 'GET',  
      params: { // 如果后端需要GET参数，可以这样传递  
        text  
      },  
      responseType: 'text' // 确保响应类型是文本，因为我们要处理Base64字符串  
    }).then(response => {  
      // 假设后端返回的是纯Base64编码的字符串，没有前缀  
      // 你可以在这里添加前缀来创建一个完整的Data URL  
      const dataUrl = `data:image/png;base64,${response.data}`;  
      return dataUrl; // 返回完整的Data URL  
    });  
  }

3. 前端页面generateIndex.vue，实现二维码生成，二维码扫描功能

<template>
  <view class="container">
    <view class="header-section text-center" style='margin-top: 30rpx;'>
      <image :src="qrCodeDataUrl" mode="aspectFit"></image>
      <button @click="fetchQRCode" style='margin-top: 30rpx;'>生成二维码</button>
    </view>
    <view class="header-section text-center" style='margin-top: 30rpx;'>
      <button @click="scanQRCode">扫描二维码</button>
    </view>
  </view>
</template>

<script>
import { generateQRCode } from "@/api/system/qrcode"
export default {
  data() {
    return {
      qrCodeDataUrl: ''
    };
  },
  methods: {

    // 生成二维码
    fetchQRCode() {
      const text = '哈哈哈!!!``'; // 你要生成的二维码内容，你可以从某处获取这个text，比如输入框的值  
      generateQRCode(text).then(dataUrl => {
        console.log("dataUrl:" + dataUrl);
        this.qrCodeDataUrl = dataUrl; // 设置图片的src为完整的Data URL  
      }).catch(error => {
        // 处理错误情况  
        uni.showToast({
          title: '获取二维码失败',
          icon: 'none'
        });
        console.error('获取二维码失败:', error);
      });
    },


    // 扫描二维码
    scanQRCode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫描结果:', res.result); // res.result 为扫描结果  

          uni.showToast({ title: '扫描结果:' + res.result, icon: 'none' });
          // 在这里处理扫描结果，例如显示在页面上或者发送到服务器  
        },
        fail: (err) => {
          console.error('扫描失败:', err);
        }
      });
    }
  }
};  
</script>

附：链接: uniapp扫码官网

---

实现效果

---

总结

通过以上代码可以在H5、小程序、web端，实现二维码生成、二维码扫描功能。