Textract JSON data to Image drawing with Kendo UI Angular 11
Textract JSON data to Image drawing with Kendo UI Angular 11
我有一个 JSON 对象，它是使用 AWS Textract 从图像中提取的，之后我尝试使用此 textract 数据绘制相同的图像。
我正在尝试为此使用 Kendo Angular Drawing API，但由于文档和用法示例有限，我不确定如何根据 [=29] 中的几何值来实现它=]
示例提取对象
{
"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"
},
Canvas 绘图对我来说是全新的，我对这个实现有点迷茫
任何建议都会对我有所帮助谢谢
从 AWS Textract 检索到的数据不完全是图像。
最简单的说法是它们是识别文本块，如所述at their webpage:
Amazon Textract makes it easy to add document text detection and
analysis to your applications. The Amazon Textract Text Detection API
can detect typed and handwritten text in a variety of documents
including financial reports, medical records, and tax forms. For
documents with structured data, you can use the Amazon Textract
Document Analysis API to extract text, forms and tables. Furthermore,
if you would like to process invoices and receipts, you can use the
AnalyzeExpense API.
这些块是文本检测操作的结果。块表示文档中一组彼此靠近的像素 (see more here) 中识别出的项目。它们仅代表您发送到 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>
Canvas绘图
这是您使用代码段提供的示例 JSON 数据的输出：
Canvas画画没那么难。要对我分享给您的代码段进行编码，您只需要了解 3 个主题 (Text, Rect and lineTo)
KendoAngular绘图
我已经将 vanilla 代码移植到 Kendo Angular 在 this stackblitz sample 绘图，我想让你知道 vanilla 比 Kendo，这是输出：
在这两种情况下，canvas 和 kendo；我不得不添加一个 zoom 变量，因为你的 X, Y 值太小了。
我有一个 JSON 对象，它是使用 AWS Textract 从图像中提取的，之后我尝试使用此 textract 数据绘制相同的图像。
我正在尝试为此使用 Kendo Angular Drawing API，但由于文档和用法示例有限，我不确定如何根据 [=29] 中的几何值来实现它=]
示例提取对象
{
"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"
},
Canvas 绘图对我来说是全新的，我对这个实现有点迷茫
任何建议都会对我有所帮助谢谢
从 AWS Textract 检索到的数据不完全是图像。
最简单的说法是它们是识别文本块，如所述at their webpage:
Amazon Textract makes it easy to add document text detection and analysis to your applications. The Amazon Textract Text Detection API can detect typed and handwritten text in a variety of documents including financial reports, medical records, and tax forms. For documents with structured data, you can use the Amazon Textract Document Analysis API to extract text, forms and tables. Furthermore, if you would like to process invoices and receipts, you can use the AnalyzeExpense API.
这些块是文本检测操作的结果。块表示文档中一组彼此靠近的像素 (see more here) 中识别出的项目。它们仅代表您发送到 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>
Canvas绘图
这是您使用代码段提供的示例 JSON 数据的输出：
Canvas画画没那么难。要对我分享给您的代码段进行编码，您只需要了解 3 个主题 (Text, Rect and lineTo)
KendoAngular绘图
我已经将 vanilla 代码移植到 Kendo Angular 在 this stackblitz sample 绘图，我想让你知道 vanilla 比 Kendo，这是输出：
在这两种情况下，canvas 和 kendo；我不得不添加一个 zoom 变量，因为你的 X, Y 值太小了。