基于AWS Textract JSON数据结合Kendo UI Angular 11绘制还原图像

前置准备 #

• 先确定绘制画布的实际像素尺寸，常用的A4幅面可选24803508像素，测试用可直接设置为12001600像素，用于将Textract返回的0-1范围的相对坐标转换为实际像素坐标。
• 完成Kendo Angular Drawing依赖安装和模块导入。

核心逻辑说明 #

AWS Textract返回的Geometry参数中，所有X、Y数值均为相对于原页面总宽度/总高度的比例值，仅需要按画布实际尺寸做比例转换即可得到真实绘制坐标。普通无倾斜的印刷文本直接使用BoundingBox参数即可完成绘制，有倾斜的特殊场景可使用Polygon参数计算旋转角度后再绘制。

具体实现步骤 #

1. 定义画布基础参数 #

在组件中声明画布的固定宽高：

// 可根据实际需求调整尺寸
const CANVAS_WIDTH = 1200;
const CANVAS_HEIGHT = 1600;

2. 遍历处理Textract数据 #

过滤出BlockType为WORD的条目，逐个转换坐标并绘制：

import { Text, Group } from '@progress/kendo-drawing';
import { render } from '@progress/kendo-drawing/dom';

// 新建绘图组
const drawGroup = new Group();

// textractBlocks为你拿到的完整JSON数组
textractBlocks.forEach(block => {
  if (block.BlockType !== 'WORD') return;
  const bbox = block.Geometry.BoundingBox;
  // 比例转实际像素
  const realX = bbox.Left * CANVAS_WIDTH;
  const realY = bbox.Top * CANVAS_HEIGHT;
  const realHeight = bbox.Height * CANVAS_HEIGHT;
  // 生成文本元素，字体大小直接用转换后的高度即可适配框高
  const textEle = new Text(block.Text, [realX, realY], {
    fontSize: realHeight,
    fill: { color: '#000000' }
  });
  drawGroup.append(textEle);
});

// 将绘图组渲染到页面中id为canvas-container的DOM容器内
render(drawGroup, document.getElementById('canvas-container'));

3. 可选调试逻辑 #

如果需要验证坐标是否准确，可以给每个文本块加边框，方便对齐检查：

import { Rect, Path } from '@progress/kendo-drawing';
// 在上述forEach循环内添加如下代码
const realWidth = bbox.Width * CANVAS_WIDTH;
const rect = new Rect([realX, realY], [realWidth, realHeight]);
const border = Path.fromRect(rect, {
  stroke: { color: '#ff0000', width: 1 },
  fill: null
});
drawGroup.append(border);

注意事项 #

• 多页场景下可按Page字段分组，每页生成单独的绘图组和容器即可。
• 手写文本可通过TextType字段判断，单独替换为手写风格字体即可。
• 有倾斜角度的文本可通过Polygon四个点的坐标差计算倾斜角度，给文本元素添加transform属性实现倾斜绘制。
• 你提供的示例JSON中的6个WORD块按上述逻辑绘制后，可得到正确的The Standard Bill of Lading Form文本。

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