From 56ed22bf985d8f9c706ed9c62dadac78d1777bd4 Mon Sep 17 00:00:00 2001
From: imsiddsingh <imsiddsingh@gmail.com>
Date: Sun, 17 Nov 2024 18:47:38 +0100
Subject: [PATCH] Added safari support (#1)

---
 angular.json             |  3 ++
 package-lock.json        | 10 ++++++
 package.json             |  3 +-
 src/app/app.component.ts | 72 ++++------------------------------------
 4 files changed, 22 insertions(+), 66 deletions(-)

diff --git a/angular.json b/angular.json
index 98c3a36..3be272d 100644
--- a/angular.json
+++ b/angular.json
@@ -96,5 +96,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 8898f9f..adcb3cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@angular/router": "^18.2.12",
         "@angular/service-worker": "^18.2.12",
         "rxjs": "~7.8.1",
+        "stackblur-canvas": "^2.7.0",
         "tslib": "^2.8.1"
       },
       "devDependencies": {
@@ -12620,6 +12621,15 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
diff --git a/package.json b/package.json
index 86e69ab..09bf38d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@angular/router": "^18.2.12",
     "@angular/service-worker": "^18.2.12",
     "rxjs": "~7.8.1",
+    "stackblur-canvas": "^2.7.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
@@ -37,4 +38,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.5.2"
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ccb0349..d16dff5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import * as StackBlur from 'stackblur-canvas';
 
 @Component({
   selector: 'app-root',
@@ -78,76 +79,17 @@ export class AppComponent {
       img.onload = () => {
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d')!;
-
+  
         const aspectRatio = img.width / img.height;
         const targetWidth = 1920;
         const targetHeight = Math.round(targetWidth / aspectRatio);
-
+  
         canvas.width = targetWidth;
         canvas.height = targetHeight;
-
-        if (this.isSafari()) {
-          // Calculate scale factors based on blur amount
-          let blurFactor = this.blurAmount / 100; // Normalize to 0-1
-          const baseScale = 0.4;
-          
-          const createBlurPass = (scale: number) => {
-            const temp = document.createElement('canvas');
-            const tempCtx = temp.getContext('2d')!;
-            // Adjust scale based on blur amount
-            const adjustedScale = scale * (1 - (blurFactor * 0.48));
-            temp.width = canvas.width * adjustedScale;
-            temp.height = canvas.height * adjustedScale;
-            return { canvas: temp, ctx: tempCtx };
-          };
-
-          const pass1 = createBlurPass(baseScale);
-          const pass2 = createBlurPass(baseScale * 0.5);
-          const pass3 = createBlurPass(baseScale * 0.25);
-
-          // Draw initial image at different scales
-          pass1.ctx.drawImage(img, 0, 0, pass1.canvas.width, pass1.canvas.height);
-          pass2.ctx.drawImage(img, 0, 0, pass2.canvas.width, pass2.canvas.height);
-          pass3.ctx.drawImage(img, 0, 0, pass3.canvas.width, pass3.canvas.height);
-
-          ctx.fillStyle = '#000000';
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-          // Adjust layer opacities based on blur amount
-          ctx.globalCompositeOperation = 'source-over';
-          ctx.globalAlpha = 0.7 * blurFactor;
-          ctx.drawImage(pass3.canvas, 0, 0, canvas.width, canvas.height);
-
-          ctx.globalAlpha = 0.6 * blurFactor;
-          ctx.drawImage(pass2.canvas, 0, 0, canvas.width, canvas.height);
-
-          ctx.globalAlpha = Math.max(0.2, 0.5 * (1 - blurFactor));
-          ctx.drawImage(pass1.canvas, 0, 0, canvas.width, canvas.height);
-
-          // Adjust vibrancy based on blur amount
-          ctx.globalCompositeOperation = 'overlay';
-          ctx.globalAlpha = 0.2 * (1 - blurFactor * 0.5);
-          ctx.drawImage(pass1.canvas, 0, 0, canvas.width, canvas.height);
-
-          // Final enhancement with reduced intensity for stronger blur
-          ctx.globalCompositeOperation = 'soft-light';
-          ctx.globalAlpha = Math.max(0.1, 0.3 * (1 - blurFactor));
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-        } else {
-          // Original approach for other browsers
-          ctx.filter = `blur(${this.blurAmount}px)`;
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-          ctx.globalCompositeOperation = 'source-over';
-          ctx.filter = `blur(${this.blurAmount * 0.8}px) brightness(1.2) contrast(1.3)`;
-          ctx.globalAlpha = 0.4;
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-          ctx.globalCompositeOperation = 'overlay';
-          ctx.globalAlpha = 0.1;
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-        }
-
+  
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, this.blurAmount);
+  
         resolve(canvas.toDataURL('image/jpeg', 0.95));
       };
       img.src = imageUrl;