Added safari support (#1)

angular.json

@@ -96,5 +96,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

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"
   }
-}
+}

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;