OCR图片识别渲染与裁剪实现方案

1、需求背景

拍照上传习题进行识别，拍照选择范围可能存在多余的部分，就导致识别不大准确，于是在这里提供一个重新裁剪图片功能。
详细见交互
http://uxc.gz.cvte.cn/#/view/c447321129081c83674a9563527a3f1c

2、整体处理逻辑与流程设计说明

2.1 选择轮询的方式获取解析结果

最终结论：作为一个中小型的应用，选择轮询作为获取解析结果是比较合适。
优势：实现简单，服务器开销相对较小，后续需要扩展或者替换其他方案也方便。
针对不足：前端这边做了相应的轮询次数限制，请求异常错误3次即不再请求；每两秒请求一次，超过1分钟没有响应结果，即30次不再轮询，超过则提示服务异常，请稍后上传文件再试。
关于轮询周期的问题目前OCR识别正常平均时间在5-6秒左右，创建完任务后每隔2秒请求一次，平均3次左右即可获取解析结果。

2.2 二次图片裁剪识别方案

目前想到了两种方式，如下，目前采用的是方式1，
1）、通过重新上传整体图片去识别。
方式1缺点就是有点耗时，需要用户重新上传图片然后再去识别返回结果。
2）、通过题号和对应题目在图片上位置来进行识别。
目前OCR算法提供商暂不支持。

2.3 关于数据校验

1）、编辑时异步延迟3秒校验数据，如果一直在编辑最长30秒延迟校验数据。
2）、完成保存时先校验数据是否符合习题保存规范。
3）、校验规范是放在服务器端，即前端这边是调用服务端校验接口。

2.4 关于过程中的错误处理

网络异常统一提示网络异常请稍后再试。其他分阶段来说明。
上传阶段
提示用户上传失败，重新上传文件

解析阶段
根据服务器响应的错误信息 提示用户具体的错误原因，提示用户进行操作。

编辑校验阶段
全局右侧通知具体的题号错误及错误原因，且不可点击完成保存

保存阶段
根据服务器响应提示失败原因

3、裁剪前端界面细节

https://codesandbox.io/s/wonderful-pine-i7fs3?file=/src/Demo.tsx:2160-2171

4、裁剪开源库的选择

从众多的裁剪图片的库中筛选出来了3个，最终选择react-cropper。
我们可以初步看一下更新下载与包体积对比

trending趋势

| | react-easy-crop | 上手容易，体积也比较小
文档比较丰富，也在持续更新修复

| 功能相对简单
不支持修改裁剪区域，不满足当前及后续扩展需求

| | react-cropper | 1、API丰富，支持缩放、拖动裁剪，功能强大，方便支持后续扩展功能。
2、文档比较丰富
3、且最近2年在持续更新迭代

| 相比前两个体积稍微大一点。 |

5、参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
https://segmentfault.com/a/1190000018496938
https://www.npmtrends.com/
https://bundlephobia.com/