Added document edge editing for rectification

src/app/camera-detection/camera-detection.component.css

@@ -30,4 +30,8 @@
     top: 60%;
     position: absolute;
     z-index: 2;
+}
+
+button {
+    margin: 4px;
 }

src/app/file-detection/file-detection.component.css

@@ -20,9 +20,9 @@
 
 .container {
     align-items: center;
-    border: 3px solid orange;
+    border: 3px solid rgb(255, 255, 255);
 }
 
-/* #normalizedImage {
-    width: 20vw;
-} */
+button {
+    margin: 4px;
+}

src/app/file-detection/file-detection.component.html

@@ -15,15 +15,16 @@
 </div>
 
 <input type="file" title="file" id="file" accept="image/*" (change)="onChange($event)" />
-
+<button (click)="rectify()">Rectify</button>
+<button (click)="save()">Save</button>
 <div class="container">
     <div id="imageview">
         <img id="image" alt="" />
-        <canvas id="overlay"></canvas>
+        <canvas id="overlay" class="overlay"></canvas>
     </div>
 
-    <div id="resultview">
-        <canvas id="normalizedImage"></canvas>
+    <div id="resultview" class="imageview">
+        <img id="normalizedImage" alt="" />
     </div>
 
 </div>

src/app/file-detection/file-detection.component.ts

@@ -69,11 +69,8 @@ export class FileDetectionComponent implements OnInit {
       this.cvr.capture(file, 'NormalizeDocument_Default').then((normalizedImagesResult: CapturedResult) => {
         if (normalizedImagesResult.items.length === 0) { return; }
         let result = normalizedImagesResult.items[0] as NormalizedImageResultItem;
-        let image = document.getElementById('normalizedImage') as HTMLCanvasElement;
-        image.width = result.imageData.width;
-        image.height = result.imageData.height;
-        const destinationContext = image.getContext('2d');
-        destinationContext?.drawImage(result.toCanvas(), 0, 0);
+        let image = document.getElementById('normalizedImage') as HTMLImageElement;
+        image.src = result.toImage("image/jpeg").src;
       });
     }
   }
@@ -99,11 +96,7 @@ export class FileDetectionComponent implements OnInit {
                 if (capturedResult.items.length > 0) {
                   let result = capturedResult.items[0] as DetectedQuadResultItem;
                   this.points = result.location.points;
-                  this.overlayManager.drawOverlay(
-                    result.location,
-                    ''
-                  );
-                  this.normalize(file, this.points);
+                  this.overlayManager.setPoints(this.points);
                 }
               }
             };
@@ -115,4 +108,20 @@ export class FileDetectionComponent implements OnInit {
     }
   }
 
+  async rectify() {
+    await this.normalize(this.currentFile!, this.points);
+  }
+
+  async save() {
+    let image = document.getElementById('normalizedImage') as HTMLImageElement;
+
+    let imageUrl = image.src;
+
+    const a = document.createElement('a');
+    a.href = imageUrl;
+    a.download = Date.now() + '';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
 }

src/app/overlay.ts

@@ -1,8 +1,9 @@
-import { Quadrilateral } from "dynamsoft-barcode-reader-bundle";
+import { Point, Quadrilateral } from "dynamsoft-barcode-reader-bundle";
 
 export class OverlayManager {
     overlay: HTMLCanvasElement | undefined;
     context: CanvasRenderingContext2D | undefined;
+    globalPoints: Point[] | undefined;
 
     initOverlay(overlay: HTMLCanvasElement): void {
         this.overlay = overlay;
@@ -28,6 +29,7 @@ export class OverlayManager {
     drawOverlay(localization: Quadrilateral, text: any): void {
         if (this.context) {
             let points = localization.points;
+            this.globalPoints = points;
             this.context.beginPath();
             this.context.moveTo(points[0].x, points[0].y);
             this.context.lineTo(points[1].x, points[1].y);
@@ -62,4 +64,94 @@ export class OverlayManager {
             this.context.fillText(text, left, top + 50);
         }
     }
+
+    setPoints(points: Point[]): void {
+        this.globalPoints = points;
+        this.overlay!.addEventListener("mousedown", (event) => this.updatePoint(event, this.context!, this.overlay!));
+        this.overlay!.addEventListener("touchstart", (event) => this.updatePoint(event, this.context!, this.overlay!));
+        this.drawQuad(this.context!, this.overlay!);
+    }
+
+    updatePoint(e: MouseEvent | TouchEvent, context: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void {
+        if (!this.globalPoints) {
+            return;
+        }
+        let globalPoints = this.globalPoints;
+        function getCoordinates(e: MouseEvent | TouchEvent): Point {
+            let rect = canvas.getBoundingClientRect();
+
+            let scaleX = canvas.clientWidth / canvas.width;
+            let scaleY = canvas.clientHeight / canvas.height;
+
+            let mouseX = (e instanceof MouseEvent ? e.clientX : e.touches[0].clientX);
+            let mouseY = (e instanceof MouseEvent ? e.clientY : e.touches[0].clientY);
+            if (scaleX < scaleY) {
+                mouseX = mouseX - rect.left;
+                mouseY = mouseY - rect.top - (canvas.clientHeight - canvas.height * scaleX) / 2;
+
+                mouseX = mouseX / scaleX;
+                mouseY = mouseY / scaleX;
+            }
+            else {
+                mouseX = mouseX - rect.left - (canvas.clientWidth - canvas.width * scaleY) / 2;
+                mouseY = mouseY - rect.top;
+
+                mouseX = mouseX / scaleY;
+                mouseY = mouseY / scaleY;
+            }
+
+            return { x: Math.round(mouseX), y: Math.round(mouseY) };
+        }
+
+        let delta = 10;
+        let coordinates = getCoordinates(e);
+        let ref = this;
+        for (let i = 0; i < globalPoints.length; i++) {
+            if (Math.abs(globalPoints[i].x - coordinates.x) < delta && Math.abs(globalPoints[i].y - coordinates.y) < delta) {
+                canvas.addEventListener("mousemove", dragPoint);
+                canvas.addEventListener("mouseup", releasePoint);
+                canvas.addEventListener("touchmove", dragPoint);
+                canvas.addEventListener("touchend", releasePoint);
+
+                function dragPoint(e: MouseEvent | TouchEvent) {
+                    coordinates = getCoordinates(e);
+                    globalPoints[i].x = coordinates.x;
+                    globalPoints[i].y = coordinates.y;
+                    ref.drawQuad(context, canvas);
+                }
+
+                function releasePoint() {
+                    canvas.removeEventListener("mousemove", dragPoint);
+                    canvas.removeEventListener("mouseup", releasePoint);
+                    canvas.removeEventListener("touchmove", dragPoint);
+                    canvas.removeEventListener("touchend", releasePoint);
+                }
+
+                break;
+            }
+        }
+    }
+
+    drawQuad(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void {
+        let globalPoints = this.globalPoints;
+        if (!globalPoints || globalPoints.length < 4) {
+            return;
+        }
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.strokeStyle = "#00ff00";
+        context.lineWidth = 2;
+        for (let i = 0; i < globalPoints.length; i++) {
+            context.beginPath();
+            context.arc(globalPoints[i].x, globalPoints[i].y, 5, 0, 2 * Math.PI);
+            context.stroke();
+        }
+        context.beginPath();
+        context.moveTo(globalPoints[0].x, globalPoints[0].y);
+        context.lineTo(globalPoints[1].x, globalPoints[1].y);
+        context.lineTo(globalPoints[2].x, globalPoints[2].y);
+        context.lineTo(globalPoints[3].x, globalPoints[3].y);
+        context.lineTo(globalPoints[0].x, globalPoints[0].y);
+        context.stroke();
+    }
 }