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

现实生活中很多地方需要使用二维码，微信公众号，支付，下载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");
    }

前台直接应用这个接口

<img src={baseURL + '/downloadIOSAPPQRCode?type=teacher'}/>

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

app.properties文件如下

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

      

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