成长就是不断踩坑的过程

图文识别第一版做出来的时候还是有点小成就的，毕竟是自己一手搞出来的，从代码编写到打包部署，虽然处处坑很多，但也是收获颇多。

webOcr 这个项目使用Spring-Boot 搭建，用户使用页面上的上传按钮将图片上传至服务器，后台调用百度云的文字识别接口，将识别出来的数据返回给前台。该项目存在以下不足：

　　1.文件上传使用form表单提供，这样就要求用户必须上传图片文件，很不方便，比如用户需要识别某个页面上图片中的文字，他不想将图片截图保存，他就想将图片截图然后粘贴去识别，以前的是不支持该功能呢

　　2.后台返回的数据其实是整个页面重新刷新了，因为表单提交不是局部刷新

　　3.识别出来的文字虽然有展示可复制，但是无法在页面进行修改

升级版的图文识别由于时间紧，所以无论是页面还是其他地方较上一版还是没有较大的变化，仅解决一上的几个问题。

　　1.页面支持粘贴图片

　　2.图片粘贴后页面自动预览加载，并ajax调用后台接口上传文件

　　3.页面局部刷新，回传的数据显示在编辑框中，数据可以编辑

 

下面总结下本次升级所遇到的问题：

1.ajax上传文件坑

　　网上给的资料基本上都会存在input  file 存在。。。但是我这个是不需要文件，我仅需要将图片文件上传

document.addEventListener('paste', function (event) {
    console.log(event);
    var isChrome = false;
    if (event.clipboardData || event.originalEvent) {
        //某些chrome版本使用的是event.originalEvent
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        if(clipboardData.items){
            // for chrome
            var  items = clipboardData.items,
                len = items.length,
                blob = null;
            isChrome = true;
            for (var i = 0; i < len; i++) {
                console.log(items[i]);
                if (items[i].type.indexOf("image") !== -1) {
                    blob = items[i].getAsFile();
                }
            }
            if(blob!==null){
                var blobUrl=URL.createObjectURL(blob);
                //blob对象显示
                document.getElementById("imgNode").src=blobUrl;
                var reader = new FileReader();
                //base64码显示
                 reader.onload = function (event) {
                     // event.target.result 即为图片的Base64编码字符串
                     var base64_str = event.target.result;
                     var formData = new FormData();
                     formData.append("file",blob);
                     $.ajax({
                         type: "POST",
                         url: "/uploadPic",
                         data: formData,
                         processData:false,
                         contentType: false,
                         success: function(data){
                            $("#returnText").val(data.value);
                         }
                     });
                 }
                reader.readAsDataURL(blob);
            }
        }
    }
});

后台

@RequestMapping(value = "/uploadPic")
    public Map<String,String> uploadPic(@RequestParam("file") MultipartFile file){
        HashMap<String,String> resultMap = new HashMap<>();
        try {
            if (!file.isEmpty()) {
                String fileName = file.getOriginalFilename();
                String path = "src/main/resources/static/images/";
                try {

                    uploadFile(file.getBytes(), path, fileName);

                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                String value = getString(path+fileName);
                resultMap.put("value",value);
            }
        } catch (Exception e) {
            e.printStackTrace();
            resultMap.put("value","请截取有效信息");
        }
        return resultMap;
    }

2.后台接收文件的Controller 需要使用RestController

3.....未完

 

代码路径：

https://git.lug.ustc.edu.cn/zhaiyt/screenshot.git