From c00532ce74a01e780a6e278093b1e8005f026164 Mon Sep 17 00:00:00 2001
From: Artur Tamborski <tamborskiartur@gmail.com>
Date: Sun, 17 Jan 2021 14:02:59 +0100
Subject: [PATCH] src: load uploaded image

---
 src/components/App/App.tsx     | 33 +++++++++++++++++++--------------
 src/helpers/findTextRegions.js |  2 +-
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 8b562e6..b7330ec 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -43,23 +43,28 @@ export default class App extends React.Component {
 
   handleTakePhoto(pictures: any[], _: any[]): void {
     console.log("handleTakePhoto: loading image...")
-    const image = pictures[0];
+    const url = URL.createObjectURL(pictures[0]);
+    const image = document.createElement('img');
+    image.src = url;
+    image.onload = () => {
+      console.log("handleTakePhoto: finding text regions...")
+      const {grid, gridWidth, gridHeight} = findTextRegions(image);
+      console.log(grid, gridWidth, gridHeight);
 
-    const {grid, gridWidth, gridHeight} = findTextRegions(image);
-    console.log(grid, gridWidth, gridHeight);
+      image.src = "";
+      URL.revokeObjectURL(url);
 
-    if (!grid) {
-      return;
+      if (!grid) {
+        return;
+      }
+
+      let g = grid[0][0];
+      let ot = document.createElement('canvas');
+      ot.width = g.w;
+      ot.height = g.h;
+      ot.getContext('2d')?.putImageData(g.data, 0, 0);
+      document.body.appendChild(ot);
     }
-
-    debugger;
-
-    let g = grid[0][0];
-    let ot = document.createElement('canvas');
-    ot.width = g.w;
-    ot.height = g.h;
-    ot.getContext('2d')?.putImageData(g.data, 0, 0);
-    document.body.appendChild(ot);
   }
 
   renderAnswers(): Array<JSX.Element> {
diff --git a/src/helpers/findTextRegions.js b/src/helpers/findTextRegions.js
index a4b11f1..e900fca 100644
--- a/src/helpers/findTextRegions.js
+++ b/src/helpers/findTextRegions.js
@@ -179,7 +179,7 @@ export function findTextRegions(image, maxWhiteSpace, maxFontLineWidth, minTextW
 
   // hopefully we matched every letter in the grid
   if (gridWidth * gridHeight !== segments.length) {
-    console.warning("findTextRegions(): Dimensions are not equal to the number of matches");
+    console.warn("findTextRegions(): Dimensions are not equal to the number of matches");
   }
 
   // prepare grid for letters