基于SpringBoot+Gradle+Zxing+JQuery（原生JS）开发条形码/二维码扫描工具，且采用原生JS调用浏览器摄像头

零、

---

近日在做课设的时候，碰到一个比较有趣的玩意。就是在应用上添加扫描二维码/条形码的技术。

下面，介绍一下本文采用的一些框架：

• SpringBoot+Gradle+JPA为框架的后端系统

• JavaScript（JQuery）编写的前端系统，其中涉及的HTTP协议发包，接收返回的JSON格式字符串皆采用JavaScript。

• 二维码扫描方面采用了Google提供的zxing。

最终结果如下图所示，即通过扫描条形码，获得条形码号，最终成功借入书籍。

一、准备工作

---

首先，先需要通过Gradle导入zxing包，对应的代码如下：

compile group: 'org.json', name: 'json', version: '20180813'
compile group: 'com.squareup.okhttp3', name: 'okhttp', version: '3.12.0'
compile 'com.google.zxing:core:3.3.0'
compile 'com.google.zxing:javase:3.3.0'

其中，第三第四行是zxing包

下面，定义前后端对接的接口如下：

{
    "account":String,
    "img":String
}
说明：
·account是借书者的帐号（学号）
·img想借的书的条形码照片
后端返回格式：
{
    "msg":String
}

这里，前端格式是基于Http MultiFilePart的，而后端格式是基于JSON的。前端在发图的时候，应当将图片编码成Base64格式的字符串。在完成了一些基础的定义后，就可以开始正式的编写工作了。

二、后端代码编写

---

首先先编写SpringBoot中Controller类的代码，主要负责读取数据：

@RequestMapping(value = "service/order.book")
    public String receive_order_request(MultipartHttpServletRequest request) {
        String account=request.getParameter("account");
        String file=request.getParameter("img");
        //System.out.println("Account="+account);
        String s= bookEngine.translateBorrowBook(account,file);
        System.out.println(s);
        return s;
    }

再编写Service类代码，进行图片信息的获取。这里Base64ToImage函数可以将字符串重新编码成图片，并写入相对路径中的目录下。

String bar="";
if(Base64ToImage(file,"tmp.jpg"))
    bar=decodeBar("tmp.jpg");
System.out.println("FIND BAR="+bar);

核心的decodeBar函数如下，告知图片所在位置即可：

public  String decodeBar(String imgPath)throws Exception{
        BufferedImage image = null;
        Result result = null;
        try {
            image = ImageIO.read(new File(imgPath));
            if (image == null) {
                System.out.println("the decode image may be not exit.");
            }
            LuminanceSource source = new BufferedImageLuminanceSource(image);
            BinaryBitmap bitmap = new BinaryBitmap(new HybridBinarizer(source));

            Hashtable hints = new Hashtable<>();
            hints.put(DecodeHintType.CHARACTER_SET, "UTF-8");
            //hints.put(DecodeHintType.PURE_BARCODE, Boolean.TRUE);
            result = new MultiFormatReader().decode(bitmap,hints);
            return result.getText();
        } catch (Exception e) {
            throw  e;
        }
    }

三、前端代码编写

---

前端代码设计到的问题主要有2点，一是如何调用摄像头进行图像获取，二是如何采用JS进行发包。第一个问题主要可以通过canvas和video标签实现。要注意的为id为video和canvas的两个标签。

    

        

            

                
TIPS:请将书本条形码对准窗口
                

                    

                        

                            

                               

                            
                            

                                
尚未检测出书本
                            
                        
                    
                
            

        

        

            

                

                

                    

                        
您的借书：


                    
                
            

        
        
    

下面，需要获取video上的图片，然后保存到canvas上（已设置隐藏），再通过ajax发包发给服务器端，这里takePhoto函数每4秒钟执行一次。

完整的Github开源代码如下，代码中涉及到了基于规则的系统。

https://github.com/zhaominyiz/RuleBasedLibrarySystem