bootstrap插件FileInput文件上传百度ocr文字识别提取

最新推荐文章于 2024-06-12 09:37:25 发布

cocosun.

最新推荐文章于 2024-06-12 09:37:25 发布

阅读量370

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/qq_44045573/article/details/106000157

版权

bootstrap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

百度云操作步骤转：https://blog.csdn.net/weixin_42006112/article/details/102463969

百度云API开发文档：https://ai.baidu.com/ai-doc/OCR/1k3h7y3db

需要引入的js，css

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/css/fileinput.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/js/fileinput.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js "></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

页面样式

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta contentType="application/x-www-form-urlencoded">
    <!-- bootstrap main js -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- fileinput main js -->
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/css/fileinput.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.3/js/fileinput.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js "></script>
    <!-- bootstrap theme -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <title>文件上传</title>
</head>
<body>
<h1>文字识别<!--<p th:text="'我是文本输出'"></p>--></h1>
<form enctype="multipart/form-data" id="ocr-form" action="/ocr" method="post">
    <div class="col-sm-4">
        <div class="form-group">
            <input type="file" name="file" id="file1" class="file">
        </div>
    </div>
    <div class="col-sm-4">
        <h2>解析结果：</h2>
        <span id="res"></span>
    </div>
</form>

<script>
    $("#file1").fileinput({
        uploadUrl: 'http://localhost:8088/ocr', //你必须在这里设置一个有效的URL，否则你会得到一个错误
        uploadAsync: true, //AJAX设置同步，异步的上传方式 （同步）
        showUpload: true, //是否显示上传按钮
        //browseClass: "btn btn-primary", //按钮样式
        showRemove: true, //显示移除按钮
        dropZoneEnabled: true,//是否显示拖拽区域
        overwriteInitial: false,
        maxFilesNum: 10,
        maxFileCount: 4, //表示允许同时上传的最大文件个数
        minFileCount: 0,	//最少文件
        validateInitialCount: false,//异步上传返回结果处理
        language: "zh",//配置语言
        uploadLabel: "上传",//设置整体上传按钮的汉字
        removeLabel: "移除",//设置整体删除按钮的汉字
        uploadClass: "btn btn-primary",//设置上传按钮样式
        showCaption: true,//是否显示标题
        maxFileSize: 9999,//文件大小限制
        enctype: 'multipart/form-data',
        allowedFileExtensions: ["jpg", "png", "gif", "docx", "zip", "xlsx", "txt"],/*上传文件格式限制*/
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        showBrowse: true,
        browseOnZoneClick: true,
    }).on('fileuploaded', function (event, data, previewId, index) {
        // alert(JSON.stringify(data));
        var res_arr = data.response.words_result;
        for (var key in res_arr) {
            console.log(res_arr[key].words);
            $('#res').append(res_arr[key].words + "<br/>");
        }
        console.log(JSON.stringify(data));
    });
</script>
</body>
</html>

pom.xml

 <dependency>
     <groupId> com.baidu.aip</groupId>
     <artifactId>java-sdk</artifactId>
     <version>4.4.1</version>
 </dependency>

package com.wzy.controller;

import com.baidu.aip.ocr.AipOcr;
import com.wzy.util.JsonChange;
import org.json.JSONObject;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Package: com.wzy.controller
 * @Author: Clarence1
 * @Date: 2019/9/14 23:41
 */
@RestController
public class OcrController {

    // 跳转登录页面
    @GetMapping("/fileupload")
    public ModelAndView login() {
        return new ModelAndView("view/fileUpload");
    }


    @PostMapping(value = "/ocr")
    public Map<Object, Object> ocr(MultipartFile file) throws Exception {
        AipOcr client = new AipOcr("17XXXX", "1OBVubcXXXXUxRCfeQeDjN", "G4hsARotvXXXXXGOTRG");
        // 传入可选参数调用接口
        HashMap<String, String> options = new HashMap<String, String>(4);
        options.put("language_type", "CHN_ENG");
        options.put("detect_direction", "true");
        options.put("detect_language", "true");
        options.put("probability", "true");

        // 参数为二进制数组
        byte[] buf = file.getBytes();
        JSONObject res = client.basicAccurateGeneral(buf, options);

        Map map = JsonChange.json2map(res.toString());
        return map;
    }

    @PostMapping(value = "/ocrStr")
    public String ocr1(MultipartFile file) throws Exception {
        AipOcr client = new AipOcr("172XX27", "1OBVubcEXXXXfeQeDjN", "G4hsXXXXoNqXGOTRG");
        // 传入可选参数调用接口
        HashMap<String, String> options = new HashMap<String, String>(4);
        options.put("language_type", "CHN_ENG");
        options.put("detect_direction", "true");
        options.put("detect_language", "true");
        options.put("probability", "true");

        String str = "";
        // 参数为二进制数组
        byte[] buf = file.getBytes();
        JSONObject res = client.basicAccurateGeneral(buf, options);

        Map map = JsonChange.json2map(res.toString());
        //  提取并打印出识别的文字
        List list = (List) map.get("words_result");
        int len = ((List) map.get("words_result")).size();
        for(int i=0; i<len; i++) {
            str = str + ((Map) list.get(i)).get("words") + "\n";
        }

        return str;
    }

}

工具类

package com.wzy.util;

import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.databind.ObjectMapper;

import java.util.Map;

/**
 * @Package: com.wzy.util
 * @Author: Clarence1
 * @Date: 2019/9/15 0:17
 */
public class JsonChange {

    /**
     * json字符串转换为map
     */
    public static <T> Map<String, Object> json2map(String jsonString) throws Exception {
        ObjectMapper mapper = new ObjectMapper();
        mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        return mapper.readValue(jsonString, Map.class);
    }

}

项目结构

图片样式

页面来源转：https://blog.csdn.net/qq_37525899/article/details/82558625

项目源码：https://github.com/XiaoLi99/ocr-demo

cocosun.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap插件FileInput文件上传百度ocr文字识别提取

js，css <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">&lt...
复制链接

扫一扫