二维码前后端生成方案

java , 评论

前言

二维码生产方案

Java后端生产

引入zxing包

1
2
3
4
5
6
7
8
9
10
11
12
<!-- https://mvnrepository.com/artifact/com.google.zxing/core -->
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.4.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.google.zxing/javase -->
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>javase</artifactId>
    <version>3.4.0</version>
</dependency>

生成二维码并用base64编码返回

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
 * @author 当我遇上你
 * @公众号 当我遇上你
 * @since 2020-05-27
 */
@Slf4j
public class QrcodeUtil {

    /**
     * 生成二维码并使用Base64编码
     *
     * @param content 需要生产二维码的字符串
     * @param width 二维码宽
     * @param height 二维码高
     * @return
     * @throws WriterException
     */
    public static String getBase64QRCode(String content, int width, int height) {
        MultiFormatWriter multiFormatWriter = new MultiFormatWriter();

        Map hints = new HashMap();

        //设置二维码四周白色区域的大小
        hints.put(EncodeHintType.MARGIN, 3);//设置0-4之间
        //设置二维码的容错性
        hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H);
        //设置编码格式
        hints.put(EncodeHintType.CHARACTER_SET, "utf-8");
        //画二维码
        BitMatrix bitMatrix = null;
        try {
            bitMatrix = multiFormatWriter.encode(content, BarcodeFormat.QR_CODE, width, height, hints);
        } catch (WriterException e) {
            log.error(e.getMessage());
        }

        BufferedImage image = MatrixToImageWriter.toBufferedImage(bitMatrix);
        //注意此处拿到字节数据
        byte[] bytes = imageToBytes(image, "jpg");
        //Base64编码
        return Base64.getEncoder().encodeToString(bytes);
    }

    private static byte[] imageToBytes(BufferedImage image, String type) {
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        try {
            ImageIO.write(image, type, out);
        } catch (IOException e) {
            log.error(e.getLocalizedMessage());
        }
        return out.toByteArray();
    }
}

web接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package cn.idea360.demo.modules.login;

import cn.idea360.demo.common.utils.QrcodeUtil;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.OutputStream;
import java.util.Base64;

@RestController
@RequestMapping("/qr")
public class QrController {
    
    /**
     * http://localhost:8888/qr/base64qr
     *
     * <img src="data:image/jpg;base64,base64str..." alt="">
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/base64qr")
    public String getQrByBase64() throws Exception {
        String base64QRCode = QrcodeUtil.getBase64QRCode("C:\\Users\\Administrator\\Desktop\\1.jpg", 400, 400);
        return "data:image/jpg;base64," + base64QRCode;
    }
}

Vue前端生产

笔者采用的是npm包管理

1
2
"@xkeshi/vue-qrcode": "^1.0.0",
"qrcode": "^1.3.2",

组件引入

1
2
3
4
5
6
7
import VueQrcode from '@xkeshi/vue-qrcode';

export default {
    components: {
      VueQrcode
    },
}

使用

1
2
3
4
5
6
7
8
9
<el-table-column
  prop="deptQrcode"
  header-align="center"
  align="center"
  label="二维码">
  <template slot-scope="scope">
    <vue-qrcode :value="scope.row.deptQrcode" :options="{ size: 100 }"></vue-qrcode>
  </template>
</el-table-column>

最后

本文到此结束，感谢阅读。如果您觉得不错，请关注公众号【当我遇上你】，您的支持是我写作的最大动力。

当我遇上你

勿在浮沙筑高楼