基于Django的图片OCR识别文本拖拽分类功能实现咨询

整个需求拆成后端数据处理、前端交互实现、结果存贮三个模块即可，不需要复杂的额外依赖：

后端（Django侧）逻辑 #

• 先处理Google Vision API的返回结果，它返回的每个识别文本块自带boundingPoly四角坐标，你只需要把坐标换算成相对于原图宽高的百分比值，和文本内容、关联图片ID一起存到专门的OCR文本数据表中，额外加个唯一文本ID做主键就行
• 提供两个基础接口：
  • 图片加载接口：前端传入图片ID，返回该图对应的所有OCR文本的结构化数据（文本内容、坐标、ID）
  • 分类提交接口：前端传入文本ID、目标分类容器的标识，后端把分类关联关系存到分类结果表即可
• 不需要处理任何前端交互逻辑，只做数据校验、存、取的工作即可

前端侧逻辑 #

• 先做基础布局：用同一个父容器放两层元素，底层是原图<img>标签，上层是和原图尺寸完全一致的绝对定位透明容器，所有OCR文本元素都放在这个透明容器里
• 渲染可拖拽元素：拿到后端返回的OCR数据后，用绝对定位+百分比坐标把每个文本元素放到对应位置，默认可以做半透明白色背景+浅灰色边框的样式，hover时高亮，既不遮挡原图内容，用户也能一眼找到可拖拽区域
• 拖拽功能实现两种方案按需选：
  • 无第三方依赖方案：用原生HTML5 Drag & Drop API，给每个文本元素加draggable="true"属性，监听dragstart事件把当前文本ID存入dataTransfer对象，所有目标分类<div>监听drop事件拿到文本ID，完成后续逻辑即可
  • 框架生态方案：如果项目用了Vue/React，直接用对应成熟拖拽库，不用手写底层拖拽逻辑，开发效率更高
• 拖拽后交互：用户把文本拖到目标分类容器后，可以选择把原位置的文本元素灰化标注为已分类，或者直接从原图层移除，同时在目标分类容器里新增对应文本的展示卡片，同步调用后端分类提交接口存结果

可选优化点 #

• 支持撤销操作：分类后的文本可以拖回原图区域撤销分类，前端更新状态后调用后端接口删除对应分类记录即可
• 重叠区域适配：如果两个文本识别区域有重叠，用户点击重叠位置时弹出小选择框让用户确认要拖拽的文本，避免操作混淆
• 多端适配：因为用了百分比坐标，不管前端把图片缩放到多大尺寸，文本元素都能精准对齐原图的对应位置

内容的提问来源于stack exchange，提问作者edwp