使用 Kendo UI Angular 11 将 Textract JSON 数据绘制到图像
问题描述 投票：0回答：2
我有一个 JSON 对象，它是使用 AWS Textract 从图像中提取的，之后我尝试使用此文本数据绘制相同的图像。
我正在尝试使用 Kendo Angular Drawing API 来实现此目的，并且由于文档和使用示例有限，我不完全确定如何从 JSON 中的几何值实现此功能
提取的对象样本
{
"BlockType": "WORD",
"Confidence": 99.93840789794922,
"Text": "The",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.036412131041288376,
"Height": 0.014151308685541153,
"Left": 0.13431107997894287,
"Top": 0.03131059184670448
},
"Polygon": [
{
"X": 0.13431107997894287,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.045461900532245636
},
{
"X": 0.13431107997894287,
"Y": 0.045461900532245636
}
]
},
"Id": "da6d85a6-3c79-484b-a07d-d84e968844ae",
"Page": 1,
"SearchKey": "The"
},
{
"BlockType": "WORD",
"Confidence": 99.77457427978516,
"Text": "Standard",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.08427372574806213,
"Height": 0.013822372071444988,
"Left": 0.17733719944953918,
"Top": 0.03183155879378319
},
"Polygon": [
{
"X": 0.17733719944953918,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.04565393179655075
},
{
"X": 0.17733719944953918,
"Y": 0.04565393179655075
}
]
},
"Id": "e6587cca-2e7e-4231-9978-4b303241645b",
"Page": 1,
"SearchKey": "Standard"
},
{
"BlockType": "WORD",
"Confidence": 99.82964324951172,
"Text": "Bill",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.035674601793289185,
"Height": 0.014618489891290665,
"Left": 0.26750874519348145,
"Top": 0.03160806745290756
},
"Polygon": [
{
"X": 0.26750874519348145,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.04622655734419823
},
{
"X": 0.26750874519348145,
"Y": 0.04622655734419823
}
]
},
"Id": "a6947531-ae08-40b3-8161-8fa78d430ad4",
"Page": 1,
"SearchKey": "Bill"
},
{
"BlockType": "WORD",
"Confidence": 99.97029876708984,
"Text": "of",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.022517522796988487,
"Height": 0.014790677465498447,
"Left": 0.3098187744617462,
"Top": 0.03196505829691887
},
"Polygon": [
{
"X": 0.3098187744617462,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.04675573855638504
},
{
"X": 0.3098187744617462,
"Y": 0.04675573855638504
}
]
},
"Id": "53853140-e3c4-4f3a-a4b7-67ad39e1bb32",
"Page": 1,
"SearchKey": "of"
},
{
"BlockType": "WORD",
"Confidence": 99.88966369628906,
"Text": "Lading",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.06747607886791229,
"Height": 0.01772529073059559,
"Left": 0.3355117440223694,
"Top": 0.032798975706100464
},
"Polygon": [
{
"X": 0.3355117440223694,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.0505242682993412
},
{
"X": 0.3355117440223694,
"Y": 0.0505242682993412
}
]
},
"Id": "5060d908-2318-48ad-bd6c-e4694501a8ce",
"Page": 1,
"SearchKey": "Lading"
},
{
"BlockType": "WORD",
"Confidence": 99.94490814208984,
"Text": "Form",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.051753073930740356,
"Height": 0.014337458647787571,
"Left": 0.4095679521560669,
"Top": 0.033189330250024796
},
"Polygon": [
{
"X": 0.4095679521560669,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.04752678796648979
},
{
"X": 0.4095679521560669,
"Y": 0.04752678796648979
}
]
},
"Id": "3cf3fb15-e77f-48a5-bf76-be35d32f8be6",
"Page": 1,
"SearchKey": "Form"
},
画布绘图对我来说是全新的，我对这个实现有点迷失
任何建议都会帮助我谢谢
2个回答
3
投票
投票
从 AWS Textract 检索到的数据并不完全是图像。
最简单的说法是它们是可识别的文本块，如在其网页上所述：
Amazon Textract 可以轻松添加文档文本检测和 分析您的应用程序。 Amazon Textract 文本检测 API 可以检测各种文档中的打字和手写文本 包括财务报告、医疗记录和纳税表格。为了 具有结构化数据的文档，您可以使用 Amazon Textract 用于提取文本、表单和表格的文档分析 API。此外， 如果您想处理发票和收据，您可以使用 分析费用 API。
这些块是文本检测操作的结果。块表示文档中在一组彼此靠近的像素内识别的项目（在此处查看更多内容）。它们仅代表您发送到 API 的输入。
我制作了以下代码片段，可以满足您的要求。但是，从 API 收集的响应旨在用作您的实施需求；并且可能不是以下方式：
var data = [{
"BlockType": "WORD",
"Confidence": 99.93840789794922,
"Text": "The",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.036412131041288376,
"Height": 0.014151308685541153,
"Left": 0.13431107997894287,
"Top": 0.03131059184670448
},
"Polygon": [
{
"X": 0.13431107997894287,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.045461900532245636
},
{
"X": 0.13431107997894287,
"Y": 0.045461900532245636
}
]
},
"Id": "da6d85a6-3c79-484b-a07d-d84e968844ae",
"Page": 1,
"SearchKey": "The"
},
{
"BlockType": "WORD",
"Confidence": 99.77457427978516,
"Text": "Standard",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.08427372574806213,
"Height": 0.013822372071444988,
"Left": 0.17733719944953918,
"Top": 0.03183155879378319
},
"Polygon": [
{
"X": 0.17733719944953918,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.04565393179655075
},
{
"X": 0.17733719944953918,
"Y": 0.04565393179655075
}
]
},
"Id": "e6587cca-2e7e-4231-9978-4b303241645b",
"Page": 1,
"SearchKey": "Standard"
},
{
"BlockType": "WORD",
"Confidence": 99.82964324951172,
"Text": "Bill",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.035674601793289185,
"Height": 0.014618489891290665,
"Left": 0.26750874519348145,
"Top": 0.03160806745290756
},
"Polygon": [
{
"X": 0.26750874519348145,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.04622655734419823
},
{
"X": 0.26750874519348145,
"Y": 0.04622655734419823
}
]
},
"Id": "a6947531-ae08-40b3-8161-8fa78d430ad4",
"Page": 1,
"SearchKey": "Bill"
},
{
"BlockType": "WORD",
"Confidence": 99.97029876708984,
"Text": "of",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.022517522796988487,
"Height": 0.014790677465498447,
"Left": 0.3098187744617462,
"Top": 0.03196505829691887
},
"Polygon": [
{
"X": 0.3098187744617462,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.04675573855638504
},
{
"X": 0.3098187744617462,
"Y": 0.04675573855638504
}
]
},
"Id": "53853140-e3c4-4f3a-a4b7-67ad39e1bb32",
"Page": 1,
"SearchKey": "of"
},
{
"BlockType": "WORD",
"Confidence": 99.88966369628906,
"Text": "Lading",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.06747607886791229,
"Height": 0.01772529073059559,
"Left": 0.3355117440223694,
"Top": 0.032798975706100464
},
"Polygon": [
{
"X": 0.3355117440223694,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.0505242682993412
},
{
"X": 0.3355117440223694,
"Y": 0.0505242682993412
}
]
},
"Id": "5060d908-2318-48ad-bd6c-e4694501a8ce",
"Page": 1,
"SearchKey": "Lading"
},
{
"BlockType": "WORD",
"Confidence": 99.94490814208984,
"Text": "Form",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.051753073930740356,
"Height": 0.014337458647787571,
"Left": 0.4095679521560669,
"Top": 0.033189330250024796
},
"Polygon": [
{
"X": 0.4095679521560669,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.04752678796648979
},
{
"X": 0.4095679521560669,
"Y": 0.04752678796648979
}
]
},
"Id": "3cf3fb15-e77f-48a5-bf76-be35d32f8be6",
"Page": 1,
"SearchKey": "Form"
},
{
"BlockType": "WORD",
"Confidence": 99.93840789794922,
"Text": "The",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.036412131041288376,
"Height": 0.014151308685541153,
"Left": 0.13431107997894287,
"Top": 0.03131059184670448
},
"Polygon": [
{
"X": 0.13431107997894287,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.03131059184670448
},
{
"X": 0.17072321474552155,
"Y": 0.045461900532245636
},
{
"X": 0.13431107997894287,
"Y": 0.045461900532245636
}
]
},
"Id": "da6d85a6-3c79-484b-a07d-d84e968844ae",
"Page": 1,
"SearchKey": "The"
},
{
"BlockType": "WORD",
"Confidence": 99.77457427978516,
"Text": "Standard",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.08427372574806213,
"Height": 0.013822372071444988,
"Left": 0.17733719944953918,
"Top": 0.03183155879378319
},
"Polygon": [
{
"X": 0.17733719944953918,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.03183155879378319
},
{
"X": 0.2616109251976013,
"Y": 0.04565393179655075
},
{
"X": 0.17733719944953918,
"Y": 0.04565393179655075
}
]
},
"Id": "e6587cca-2e7e-4231-9978-4b303241645b",
"Page": 1,
"SearchKey": "Standard"
},
{
"BlockType": "WORD",
"Confidence": 99.82964324951172,
"Text": "Bill",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.035674601793289185,
"Height": 0.014618489891290665,
"Left": 0.26750874519348145,
"Top": 0.03160806745290756
},
"Polygon": [
{
"X": 0.26750874519348145,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.03160806745290756
},
{
"X": 0.30318334698677063,
"Y": 0.04622655734419823
},
{
"X": 0.26750874519348145,
"Y": 0.04622655734419823
}
]
},
"Id": "a6947531-ae08-40b3-8161-8fa78d430ad4",
"Page": 1,
"SearchKey": "Bill"
},
{
"BlockType": "WORD",
"Confidence": 99.97029876708984,
"Text": "of",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.022517522796988487,
"Height": 0.014790677465498447,
"Left": 0.3098187744617462,
"Top": 0.03196505829691887
},
"Polygon": [
{
"X": 0.3098187744617462,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.03196505829691887
},
{
"X": 0.33233630657196045,
"Y": 0.04675573855638504
},
{
"X": 0.3098187744617462,
"Y": 0.04675573855638504
}
]
},
"Id": "53853140-e3c4-4f3a-a4b7-67ad39e1bb32",
"Page": 1,
"SearchKey": "of"
},
{
"BlockType": "WORD",
"Confidence": 99.88966369628906,
"Text": "Lading",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.06747607886791229,
"Height": 0.01772529073059559,
"Left": 0.3355117440223694,
"Top": 0.032798975706100464
},
"Polygon": [
{
"X": 0.3355117440223694,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.032798975706100464
},
{
"X": 0.40298783779144287,
"Y": 0.0505242682993412
},
{
"X": 0.3355117440223694,
"Y": 0.0505242682993412
}
]
},
"Id": "5060d908-2318-48ad-bd6c-e4694501a8ce",
"Page": 1,
"SearchKey": "Lading"
},
{
"BlockType": "WORD",
"Confidence": 99.94490814208984,
"Text": "Form",
"TextType": "PRINTED",
"Geometry": {
"BoundingBox": {
"Width": 0.051753073930740356,
"Height": 0.014337458647787571,
"Left": 0.4095679521560669,
"Top": 0.033189330250024796
},
"Polygon": [
{
"X": 0.4095679521560669,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.033189330250024796
},
{
"X": 0.46132102608680725,
"Y": 0.04752678796648979
},
{
"X": 0.4095679521560669,
"Y": 0.04752678796648979
}
]
},
"Id": "3cf3fb15-e77f-48a5-bf76-be35d32f8be6",
"Page": 1,
"SearchKey": "Form"
}
];
const zoom = 1400;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const drawer = {
BoundingBox: drawBoundingBox,
Polygon: drawPolygon,
};
ctx.strokeStyle = "#0000ff";
ctx.lineWidth = 1;
data.forEach((args) => {
if (args.Geometry) {
for (var key in args.Geometry) {
if (typeof drawer[key] === 'function') {
drawer[key](args.Geometry[key], args.Text);
} else {
console.error('Unsupported object, you\'ll need to add support here!');
}
}
}
});
function drawBoundingBox(args, text) {
ctx.beginPath();
ctx.rect(args.Left * zoom, args.Top * zoom, args.Width * zoom, args.Height * zoom);
ctx.stroke();
ctx.font = (args.Height * zoom) + "px Arial";
ctx.fillText(text, (args.Left * zoom), (args.Top * zoom) + (args.Height * zoom));
}
function drawPolygon(args, text) {
ctx.beginPath();
ctx.moveTo(args[0].X * zoom, args[0].Y * zoom);
for (var i = 1; i < args.length; i++) {
ctx.lineTo(args[i].X * zoom, args[i].Y * zoom);
}
ctx.lineTo(args[0].X * zoom, args[0].Y * zoom);
ctx.stroke();
const h = ((args[args.length - 1].Y - args[0].Y) * zoom);
ctx.font = h + "px Arial";
ctx.strokeText(text, args[0].X * zoom, (args[0].Y + h) * zoom);
}<canvas width="850" height="450" id="canvas"></canvas>画布绘图
这是您使用代码片段提供的示例 JSON 数据的输出：
画布绘图并不难。要编写我分享给您的代码片段，您只需要 3 个主题的知识（Text、Rect 和 lineTo）
剑道角度绘图
我已经将 vanilla 代码移植到了这个 stackblitz 示例中的 Kendo Angular Drawing，我想让你知道 vanilla 比 Kendo 更容易使用，这是输出：
在这两种情况下，画布和剑道；我必须添加一个
zoomX, Y0
投票
投票
查看这个包，它将简化您的问题并创建一个用户界面，您可以在其中查看和复制提取的文本： https://www.npmjs.com/package/amazon-texttract-preview 演示链接：https://lamentable-relation.surge.sh/
最新问题
- Apache echartJS 折线图中的中间点？
- Unity 中移动的命令模式实现
- 使用 HTTP1.1 进行 SQL 插入
- 仅打印文本区域
- 使用覆盖 toString 方法时获取错误的值
- 如何在 Rails 中将“turbo:frame-load”事件与 Hotwire 和 Stimulus 一起使用？
- 如何使用 JDBC 调用带有命名参数的 Sybase 存储过程
- 引导多个按钮仅获取按下的按钮的文本
- 未经授权。访问令牌丢失、无效、受众不正确 (https://cognitiveservices.azure.com) 或已过期
- Tkinter 窗口与 Pygame 窗口一起打开
- 适用于 Java 和 Python 的 Aspose API
- 如何进行 BigQuery 数据备份以最大限度地降低财务成本？
- 在 Javascript 数组中查找最小值和最大值
- 对于任意总元素计数，AA 树如何在每个非叶节点始终有 2 个子节点？
- 如何使用Python从Json数据自动化Word文档
- VBA 循环插入 MS Word 中的表格
- 正确使用生成器打字
- 有没有办法强制Vue更喜欢继承的类？
- Excel VBA SaveAs 与 File SaveAs 有什么不同吗
- 如何在 odoo 中进行完全控制的编码？
© www.soinside.com 2019 - 2024. All rights reserved.