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

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