EFRS-954 View images with the extension.tiff.tif (fixed conflicts)

ui/src/app/data/interfaces/image.ts

@@ -0,0 +1,4 @@
+export interface ImageSize {
+  width: any;
+  height: any;
+}

ui/src/app/features/face-services/face-recognition/recognition-result/recognition-result.component.ts

@@ -19,10 +19,11 @@ import { Observable } from 'rxjs';
 import { first, map, tap } from 'rxjs/operators';
 
 import { ServiceTypes } from '../../../../data/enums/service-types.enum';
-import { ImageSize, recalculateFaceCoordinate, resultRecognitionFormatter, createDefaultImage } from '../../face-services.helpers';
+import { recalculateFaceCoordinate, resultRecognitionFormatter, createDefaultImage } from '../../face-services.helpers';
 import { RequestResult } from '../../../../data/interfaces/response-result';
 import { RequestInfo } from '../../../../data/interfaces/request-info';
 import { LoadingPhotoService } from '../../../../core/photo-loader/photo-loader.service';
+import { ImageSize } from '../../../../data/interfaces/image';
 
 @Component({
   selector: 'app-recognition-result',
@@ -50,7 +51,6 @@ export class RecognitionResultComponent implements OnChanges {
   myCanvas: ElementRef;
   faceDescriptionHeight = 25;
   formattedResult: string;
-
   private imgCanvas: ImageBitmap;
 
   constructor(private loadingPhotoService: LoadingPhotoService) {}
@@ -76,7 +76,7 @@ export class RecognitionResultComponent implements OnChanges {
   private prepareForDraw(size, rawData): Observable<any> {
     return rawData.map(value => ({
       box: recalculateFaceCoordinate(value.box, size, this.canvasSize, this.faceDescriptionHeight),
-      faces: value.faces,
+      faces: value.subjects,
     }));
   }
 
@@ -87,7 +87,7 @@ export class RecognitionResultComponent implements OnChanges {
     ctx.fillRect(box.x_min, box.y_max, box.x_max - box.x_min, this.faceDescriptionHeight);
     ctx.fillStyle = 'white';
     ctx.fillText(face.similarity, box.x_min + 10, box.y_max + 20);
-    ctx.fillText(face.face_name, box.x_min + 10, box.y_min - 5);
+    ctx.fillText(face.subject, box.x_min + 10, box.y_min - 5);
   }
 
   private createDetectionImage(ctx, box) {
@@ -115,17 +115,17 @@ export class RecognitionResultComponent implements OnChanges {
     }
   }
 
-  createImage(drow) {
+  createImage(draw) {
     const ctx: CanvasRenderingContext2D = this.myCanvas.nativeElement.getContext('2d');
     ctx.drawImage(this.imgCanvas, 0, 0, this.canvasSize.width, this.canvasSize.height);
-    drow(ctx);
+    draw(ctx);
   }
 
   drawRecognitionCanvas(data) {
     this.createImage(ctx => {
       for (const value of data) {
         // eslint-disable-next-line @typescript-eslint/naming-convention
-        const resultFace = value.faces.length > 0 ? value.faces[0] : { face_name: undefined, similarity: 0 };
+        const resultFace = value.faces.length > 0 ? value.faces[0] : { subject: undefined, similarity: 0 };
         this.createRecognitionImage(ctx, value.box, resultFace);
       }
     });

ui/src/app/features/face-services/face-services.helpers.ts

@@ -14,10 +14,8 @@
  * permissions and limitations under the License.
  */
 
-export interface ImageSize {
-  width: any;
-  height: any;
-}
+import { ImageSize } from '../../data/interfaces/image';
+
 /**
  * Beautify the result JSON format
  *

ui/src/app/features/face-services/face-verification/verification-result/verification-result.component.ts

@@ -17,16 +17,12 @@
 import { Component, ElementRef, Input, OnDestroy, ViewChild, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
-import {
-  getImageSize,
-  ImageSize,
-  recalculateFaceCoordinate,
-  resultRecognitionFormatter,
-  createDefaultImage,
-} from '../../face-services.helpers';
+import { recalculateFaceCoordinate, resultRecognitionFormatter, createDefaultImage } from '../../face-services.helpers';
 import { RequestResult } from '../../../../data/interfaces/response-result';
 import { RequestInfo } from '../../../../data/interfaces/request-info';
 import { VerificationServiceFields } from '../../../../data/enums/verification-service.enum';
+import { LoadingPhotoService } from '../../../../core/photo-loader/photo-loader.service';
+import { ImageSize } from '../../../../data/interfaces/image';
 
 @Component({
   selector: 'app-verification-result',
@@ -59,7 +55,9 @@ export class VerificationResultComponent implements OnChanges, OnDestroy {
   private checkFilePrintSub: Subscription;
   private processFileCanvasLink: any = null;
   private checkFileCanvasLink: any = null;
+  private imgCanvas: ImageBitmap;
 
+  constructor(private loadingPhotoService: LoadingPhotoService) {}
   ngOnChanges(changes: SimpleChanges) {
     if (changes?.requestInfo?.currentValue) {
       this.formattedResult = resultRecognitionFormatter(this.requestInfo.response);
@@ -102,10 +100,11 @@ export class VerificationResultComponent implements OnChanges, OnDestroy {
   }
 
   printResult(canvas: ElementRef, canvasSize: any, file: any, data, key: string): Observable<any> {
-    return getImageSize(file).pipe(
-      tap(({ width, height }) => {
-        canvasSize.height = (height / width) * canvasSize.width;
+    return this.loadingPhotoService.loader(file).pipe(
+      tap((bitmap: ImageBitmap) => {
+        canvasSize.height = (bitmap.height / bitmap.width) * canvasSize.width;
         canvas.nativeElement.setAttribute('height', canvasSize.height);
+        this.imgCanvas = bitmap;
       }),
       map(imageSize => this.prepareForDraw(imageSize, data, canvasSize, key)),
       map(preparedImageData => this.drawCanvas(canvas, preparedImageData, file, canvasSize))
@@ -141,7 +140,7 @@ export class VerificationResultComponent implements OnChanges, OnDestroy {
    * @preparedData prepared box data and faces.
    */
   drawCanvas(canvas, data, file, canvasSize) {
-    this.createImage(canvas, file, canvasSize, (img, ctx) => {
+    this.createImage(canvas, file, canvasSize, ctx => {
       if (!data) return;
       for (const value of data) {
         // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -151,12 +150,8 @@ export class VerificationResultComponent implements OnChanges, OnDestroy {
   }
 
   createImage(canvas, file, canvasSize, draw) {
-    const img = new Image();
     const ctx: CanvasRenderingContext2D = canvas.nativeElement.getContext('2d');
-    img.onload = () => {
-      ctx.drawImage(img, 0, 0, canvasSize.width, canvasSize.height);
-      draw(img, ctx);
-    };
-    img.src = URL.createObjectURL(file);
+    ctx.drawImage(this.imgCanvas, 0, 0, canvasSize.width, canvasSize.height);
+    draw(ctx);
   }
 }