0

我有一个 JSON 对象，该对象是使用AWS Textract从图像中提取的，之后我尝试使用此 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"
    },

画布绘图对我来说是全新的，我对这个实现几乎没有迷失

任何建议都会帮助我谢谢

4

1 回答 1

1

从 AWS Textract 检索到的数据并不完全是图像。

最简单的说法是它们是可识别的文本块，如其网页所述：

Amazon Textract 可以轻松地将文档文本检测和分析添加到您的应用程序中。Amazon Textract Text Detection API 可以检测包括财务报告、医疗记录和税表在内的各种文档中的打字和手写文本。对于包含结构化数据的文档，您可以使用 Amazon Textract Document Analysis API 来提取文本、表单和表格。此外，如果您想处理发票和收据，可以使用 AnalyzeExpense 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）

剑道角度绘图

我已经在这个 stackblitz 示例中将原版代码移植到了 Kendo Angular Drawing ，我想让你知道原版比 Kendo 更容易使用，这是输出： 剑道角度绘图截图

在这两种情况下，画布和剑道；我不得不添加一个zoom变量，因为你的X, Y值太小了。

于 2021-09-16T00:19:39.440 回答