代码之家  ›  专栏  ›  技术社区  ›  imPK

Textract JSON数据到带有剑道UI的图像绘图

  •  0
  • imPK  · 技术社区  · 5 年前

    我有一个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"
        },
    

    画布绘制对我来说是全新的,我对这个实现有点迷茫

    任何建议都会对我有帮助谢谢

    0 回复  |  直到 5 年前
        1
  •  1
  •   luiscla27    5 年前

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

    最简单的说法是,它们是公认的文本块,如上所述 at their webpage :

    Amazon Textract使添加文档文本检测和 分析你的应用程序。Amazon Textract文本检测API 可以检测各种文档中的键入和手写文本 包括财务报告、医疗记录和税务表格。对于 有结构化数据的文档,可以使用Amazon Textract 用于提取文本、表单和表格的文档分析API。此外 如果要处理发票和收据,可以使用 AnalyzeAPI。

    这些块是文本检测操作的结果。块表示文档中彼此接近的一组像素中可识别的项目( 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>

    帆布画

    以下是您使用代码片段提供的示例JSON数据的输出: Canvas Drawing Screenshot

    帆布画没那么难。要编写我分享给你的代码片段,你只需要3个主题的知识( Text , Rect 和 lineTo )


    剑道角画

    我已经把普通代码移植到剑道角画中了 this stackblitz sample ,我想让你知道香草比剑道更容易使用,以下是输出: Kendo Angular Drawing Screenshot


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

    推荐文章