打开摄像头拍照，并识别图片中的文字（网上最详细教程）

前言

最近遇到一个项目需求，需要进行拍照，并且识别图片中的文字。拿到这个需求的的时候，自己有点懵，因为对这一块目前了解还太少。不过想着之前自己做过的一些项目和老师说过：我们现在很多时候都是面向service编程。于是就信心满满的开始了探索之旅。由于时间紧迫，一共花了一个晚上和一个上午的时间完成了这个需求。

1、打开摄像头

关于打开摄像头这个功能，我们知道HTML5出现以后可以

navigator.getUserMedia

打开我们的摄像头，其核心代码如下：

var exArray = [];
if (navigator.getUserMedia) {  
    navigator.getUserMedia({  
        'video': {  
            'optional': [{  
                'sourceId': exArray[1] 
            }]  
        },
    }, successFunc, errorFunc); 
}  
else {  
    alert('不支持摄像头');
}  

2、拍照

进行拍照我们可以通过HTML中提供的video标签和canvas实现，通过获取到canvas上下文和video的DOM，然后通过drawImage方法，就可以实现拍照功能

context.drawImage(oVideo, 0, 0, 640, 480);

3、图片上传

关于图片上传这一块，主要思路是先想办法把canvas绘制的图形转化为图片，但是canvas只提供了toDataURL()方法，通过该方法可以获取到图形的base64。然后根据base64转化为图片并保存在本地。

3.1、获取canvas图像的base64（核心代码）

// base64的长度在8000以上
var base64 = oCanvas.toDataURL();

3.2、后台获取base64字符串

需要注意的是，我们在获取base64的时候，通过ajax方法请求，会把base64中的+换为空格，因此我们在后台获取到base64以后需要替换回来。

3.3、根据base64转化为图片（核心代码）

/**
     * 
     * @date 2018年5月7日 下午12:32:14
     * Description: 通过base64转化为图片
     */
    public static boolean getPicture(String str) {
        boolean flag = true;
        if(str == null || str == "") flag = false;
        //使用 BASE64Decoder对象报错，查看该博客：https://blog.youkuaiyun.com/u011514810/article/details/72725398
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            byte[] bytes = decoder.decodeBuffer(str);
            for(int i=0; i<bytes.length; i++) {
                if(bytes[i] < 0) bytes[i] += 256;
            }
            String imgFilePath = "C:\\apache-tomcat-6.0.30\\webapps\\picture-text-demo\\images\\new.jpg";
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(bytes);
            out.flush();
            out.close();
        } catch (IOException e) {
            flag = false;
            e.printStackTrace();
        }
        return flag;
    }

4、图片中的文字识别

文字的识别技术，如果你在网上一搜索就会看到一个OCR的东西，这个OCR到底是什么呢，翻译过来以后就是（Optical Character Recognition）光学字符识别，即电子设备通过检测暗、亮的模式确定其形状，然后用字符识别的方法把形状翻译成计算机文字的过程。

4.1、百度AI开发平台

这是自己首次了解到这个平台，不了解不知道，一了解吓一跳啊，想不到百度这一块做的这么好了。这里要安利一波（http://ai.baidu.com/）

这是部分功能，登录以后创建应用，然后下载响应的SDK，看着api就可以实现需求啦。（另外一个小插曲，现在的百度和腾讯线上服务做得真的好，之前购买腾讯云的服务器，反馈了一个小问题，第二天还给我打电话来询问，在百度平台使用文字识别的时候出现了一点小问题，晚上12点反馈，过几分钟就给我发短信了。）

4.2、文字识别

下面是最自己封装的一个文字识别的方法，在创建应用成功以后，会为你提供APP_ID 、API_KEY 、SECRET_KEY 。

public static String getText() {
   String APP_ID = "your APP_ID ";
   String API_KEY = "your API_KEY ";
   String SECRET_KEY = "your SECRET_KEY";

    // 初始化一个AipOcr
     AipOcr client = new AipOcr(APP_ID, API_KEY, SECRET_KEY);

     // 传入可选参数调用接口
     HashMap<String, String> options = new HashMap<String, String>();
     options.put("language_type", "CHN_ENG");
     options.put("detect_direction", "true");
     options.put("detect_language", "true");
     options.put("probability", "true");

     String image = "C:\\apache-tomcat-6.0.30\\webapps\\picture-text-demo\\images\\new.jpg";
     JSONObject res = client.basicGeneral(image, options);
     System.out.println(res);
     JSONArray words = res.getJSONArray("words_result");
     Iterator<Object> it = words.iterator();
     String result = "";
     while(it.hasNext()) {
        JSONObject ob = (JSONObject) it.next();
        System.out.println(ob.toString());
        result += ob.getString("words");
     }
     return result;
}

4、总结

到这里，这个需求算是解决了，源码已经放在了代码仓库，大家可以下载，有什么问题，可以给我评论，我看到也会及时回复
https://github.com/deng1234/OCR