ZXing+SpringMvc 生成二维码图片渲染到前台页面

朴灿烈づ我的快乐病毒、 2022-09-29 13:58 154阅读 0赞

现实生活中很多地方需要使用二维码，微信公众号，支付，下载APP等都可以以二维码为入口，扫一扫就可以得到想要的结果。一般来说二维码都是静态的，直接通过二维码生成工具生成二维码图片后，直接将静态图片嵌入网页中。而现在的业务需求是APK是不断更新版本的，你不可能每一次APP版本更新，你就生成一个二维码，还有你的服务器地址也可能会发生变化，导致这个二维码不是固定的。对于程序员来说，每次都用工具去生成二维码实在有点麻烦，肯定会考虑一些一劳永逸的方法。本文就是介绍这个功能的实现。

首先考虑的是使用前台js框架比如github上stars很高的jQuery-qrcode.js，或者qrcode.js。这也是一个不错的方法。但是本文前台使用的是react.js没有兼容ES6的二维码生成框架，所以考虑从后台获取二维码图片。

后台使用的是java，java生成二维码的jar包的选择就多样些。比如大名鼎鼎的com.google.zxing，本文使用的就是这个工具包。首先在maven下引入这个包

- <dependency>
      <groupId>com.google.zxing</groupId> 
      <artifactId>core</artifactId> 
      <version>3.3.0</version> 
      </dependency>
    - <dependency>
      <groupId>com.google.zxing</groupId> 
      <artifactId>javase</artifactId> 
      <version>3.3.0</version> 
      </dependency>

既然是下载文件就可以使用SpringMVC的ResponseEntity,泛型为byte\[\]。也可以使用原始的HttpServletResponse进行文件的下载，本文使用的是ResponseEntity。

那就可以直接封装一个下载二维码图片的方法。

/**
         * 生成并下载二维码
         * @param url 二维码对于URL
         * @param width 二维码宽
         * @param height 二维码高
         * @param format  二维码格式
         * @return
         * @throws WriterException
         * @throws IOException
         */
        public static ResponseEntity<byte[]> getResponseEntity(String url,int width, int height,String format) throws WriterException, IOException {
            Map<EncodeHintType, Object> hints = new HashMap<EncodeHintType, Object>();
            hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
            BitMatrix bitMatrix = new MultiFormatWriter().encode(url,
                    BarcodeFormat.QR_CODE, width, height, hints);// 生成矩阵
            //将矩阵转为Image
            BufferedImage image = MatrixToImageWriter.toBufferedImage(bitMatrix);
            ByteArrayOutputStream out = new ByteArrayOutputStream();
            ImageIO.write(image, format, out);//将BufferedImage转成out输出流
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
            return new ResponseEntity<byte[]>(out.toByteArray(),
                    headers, HttpStatus.CREATED);
        }

接下来直接调用就可以了，比如：

@RequestMapping("/downloadIOSAPPQRCode")
        public ResponseEntity<byte[]> downloadIOSAPPController(@RequestParam(required = true)String type)
                throws WriterException, IOException{
            InputStream is = this.getClass().getClassLoader().getResourceAsStream("app.properties");
            Properties props = new Properties();
            props.load(is);
            String appId = (String)props.get(type);
            String url = Constants.APP_STORE_SUFFIX + appId;
            return DownloadUtil.getResponseEntity(url, 150, 150, "png");
        }

前台直接应用这个接口

properties文件放在资源目录下即可

app.properties文件如下

Patriarch-APP-ID=1213271782
    Teacher-APP-ID=1213271782

**关注微信公众号每天学习一点程序员的职业经**

> > > > > > ![SouthEast][]

[SouthEast]: /images/20220708/fe06c2c566b0493184e7699c43f2c07d.png