java生成二维码—web方式

之前有说过java生成二维码的后台实现，但是实际应用中不可能只是使用java后台去生成二维码，使用java生成二维码一般会做web端，本片介绍生成二维码前端实现和后台代码的修改。

最终效果

在文本框中输入字符，点击生成二维码按钮，调用后台生成二维码接口生成二维码并返回二维码base64字符串，字符串中信息添加到 img标签src属性中即可显示二维码图片。

前端代码实现

vue 文件代码

主要还是以实现功能为主，就没有做任何布局和美化了

<template>
  <div>
    <input type="text" v-model="qrCodeText">
    <button type="button" @click="clickGetCode()">生成二维码</button>
    <img :src="'data:image/png;base64,'+ this.base64QrCode" style="width: 20vw;">
  </div>
</template>

<script>
import { getQrCode } from '@/api/downloadDoc/index' // 引入接口
export default {
  name: 'QrCode',
  data () {
    return {
      qrCodeText: '',
      base64QrCode: ''
    }
  },
  // 2、添加自定义组件
  components: {
  },
  // 初始化调用方法
  created () {

  },
  methods: {
    clickGetCode () {
      // 调用后台接口生成二维码
      getQrCode(this.qrCodeText).then(data => {
        // 返回的字符串赋值给 src 属性绑定的变量
        this.base64QrCode = data
      })
    }

  }
}
</script>
<style>

请求后台代码

import request from '../http' // 使用实例

export function getQrCode (qrCodeText) {
  return request({
    url: '/ming/getQrCode?qrCodeText=' + qrCodeText,
    method: 'get'
  })
}

后端代码实现

后端代码实现请参考之前文章：java生成二维码图片、转base64 - 掘金 (juejin.cn)

需要注意的是之前文章是直接写死的硬编码，这里是需要提供接口给前端，之前是介绍了两种方法生成二维码，这里需要使用的是第一种方法转base64之后把字符串返回给前端。 以下是修改过后的代码可供参考：

@RequestMapping("/getQrCode")
public String getQrCode(@RequestParam String qrCodeText){
    String base64 = "";
    // 需要生成的二维码的文字、地址
    String QrCodeStr = qrCodeText;
    // 创建二维码
    try {
        Map<EncodeHintType, String> charcter = new HashMap<>();
        // 设置字符集
        charcter.put(EncodeHintType.CHARACTER_SET, "UTF-8");
        // 设置二维码的四个参数   需要生成的字符串，类型设置为二维码，二维码宽度，二维码高度，字符串字符集
        BitMatrix bitMatrix = new MultiFormatWriter()
                .encode(QrCodeStr, BarcodeFormat.QR_CODE, 500, 500, charcter);
        // 二维码像素，也就是上面设置的 500
        int width = bitMatrix.getWidth();
        int height = bitMatrix.getHeight();
        // 创建二维码对象
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        for (int x = 0; x < width; x++) {
            for (int y = 0; y < height; y++) {
                // 按照上面定义好的二维码颜色编码生成二维码
                image.setRGB(x, y, bitMatrix.get(x, y) ? BLACK : WHITE);
            }
        }
        // 1、第一种方式
        // 生成的二维码图片对象转 base64
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        // 设置图片的格式
        ImageIO.write(image, "png", stream);
        // 生成的二维码base64
        base64 = Base64.encode(stream.toByteArray());
    } catch (Exception e) {
        e.printStackTrace();
    }
    return base64;
}