feat(user-profile): downsize antiphishing images

shrink image down to 100x100 and try even smaller sizes up to 50x50 until the desired size is reached

Author: melanger

apps/user-profile/src/app/components/dialogs/add-auth-img-dialog/add-auth-img-dialog.component.ts

@@ -8,6 +8,10 @@ export interface AddAuthImgDialogData {
   attribute: Attribute;
 }
 
+const MAX_SIZE = 100;
+const MIN_SIZE = 50;
+const MAX_LENGTH = 5120;
+
 @Component({
   selector: 'perun-web-apps-add-auth-img-dialog',
   templateUrl: './add-auth-img-dialog.component.html',
@@ -31,6 +35,7 @@ export class AddAuthImgDialogComponent implements OnInit {
     this.theme = this.data.theme;
     this.attribute = this.data.attribute;
     this.newImage = this.attribute.value as unknown as string;
+    this.imageType = null;
   }
 
   handleInputChange(e: Event | DragEvent): void {
@@ -42,13 +47,41 @@ export class AddAuthImgDialogComponent implements OnInit {
       return;
     }
     reader.onload = this._handleReaderLoaded.bind(this) as () => void;
+    this.imageType = file.type;
     reader.readAsDataURL(file);
   }
 
-  _handleReaderLoaded(e: ProgressEvent): void {
-    const reader = e.target as FileReader;
-    const result = reader.result as string;
-    this.imgTooLong = result.length >= 5120;
+  _handleReaderLoaded(e) {
+    const reader = e.target;
+
+    let size = MAX_SIZE;
+    let result = null;
+    do {
+      const img = document.createElement("img");
+      img.src = reader.result;
+      const canvas = document.createElement("canvas");
+      let ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0);
+      const width = img.width;
+      const height = img.height;
+      if (width > height) {
+        if (width > MAX_SIZE) {
+          height *= MAX_SIZE / width;
+          width = MAX_SIZE;
+        }
+      } else if (height > MAX_SIZE) {
+        width *= MAX_SIZE / height;
+        height = MAX_SIZE;
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0, width, height);
+      result = canvas.toDataURL(this.imageType);
+      size -= 10;
+    } while(size >= MIN_SIZE && result.length >= MAX_LENGTH);
+
+    this.imgTooLong = result.length >= MAX_LENGTH;
     this.newImage = result;
   }
 
@@ -73,20 +106,19 @@ export class AddAuthImgDialogComponent implements OnInit {
     const MIN_COLOR = 120; // Min value for a color component
     const FILL_CHANCE = 0.5; // Chance of a square being filled [0, 1]
     const SQUARE = 20; // Size of a grid square in pixels
-    const GRID = 5; // Number of squares width and height
-    const SIZE = SQUARE * GRID; // Size of the canvas
+    const GRID = MAX_SIZE / SQUARE; // Number of squares width and height
     const FILL_COLOR = '#FFFFFF'; // canvas background color
 
     /* Create a temporary canvas */
     function setupCanvas(): HTMLCanvasElement {
       const canvas = document.createElement('canvas');
-      canvas.width = SIZE;
-      canvas.height = SIZE;
+      canvas.width = MAX_SIZE;
+      canvas.height = MAX_SIZE;
 
       // Fill canvas background
       const context = canvas.getContext('2d');
       context.beginPath();
-      context.rect(0, 0, SIZE, SIZE);
+      context.rect(0, 0, MAX_SIZE, MAX_SIZE);
       context.fillStyle = FILL_COLOR;
       context.fill();
       return canvas;