Add a slider for blur effect

sondreb · Nov 14, 2024 · e3d3748 · e3d3748
1 parent 17fb883
commit e3d3748
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -30,3 +30,19 @@ button {
 button:hover {
   background-color: #0056b3;
 }
+
+.controls {
+  margin: 20px 0;
+  text-align: center;
+}
+
+.controls label {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+
+.controls input[type="range"] {
+  width: 200px;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -11,6 +11,12 @@ <h1>{{title}}</h1>
 
   @if (blurredImageUrl) {
     <div class="result">
+      <div class="controls">
+        <label>
+          Blur Amount: {{blurAmount}}px
+          <input type="range" min="20" max="200" [(ngModel)]="blurAmount" (ngModelChange)="processImage()">
+        </label>
+      </div>
       <img [src]="blurredImageUrl" alt="Blurred image">
       <button (click)="downloadImage()">Download Blurred Image</button>
     </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, CommonModule],
+  imports: [RouterOutlet, CommonModule, FormsModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
@@ -14,6 +15,7 @@ export class AppComponent {
   imageUrl: string | null = null;
   blurredImageUrl: string | null = null;
   isProcessing = false;
+  blurAmount = 100;  // Default blur amount
 
   onDragOver(event: DragEvent) {
     event.preventDefault();
@@ -28,11 +30,17 @@ export class AppComponent {
     if (file && file.type.startsWith('image/')) {
       this.isProcessing = true;
       this.imageUrl = await this.readFile(file);
-      this.blurredImageUrl = await this.applyBlur(this.imageUrl);
+      await this.processImage();
       this.isProcessing = false;
     }
   }
 
+  async processImage() {
+    if (this.imageUrl) {
+      this.blurredImageUrl = await this.applyBlur(this.imageUrl);
+    }
+  }
+
   private readFile(file: File): Promise<string> {
     return new Promise((resolve) => {
       const reader = new FileReader();
@@ -56,17 +64,12 @@ export class AppComponent {
         canvas.height = targetHeight;
 
         // First pass - extreme blur
-        ctx.filter = 'blur(100px)';
+        ctx.filter = `blur(${this.blurAmount}px)`;
         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 
-        // Second pass - color enhancement
-        // ctx.globalCompositeOperation = 'saturation';
-        // ctx.fillStyle = 'hsl(0, 70%, 50%)';
-        // ctx.fillRect(0, 0, canvas.width, canvas.height);
-
         // Third pass - very soft overlay of original
         ctx.globalCompositeOperation = 'source-over';
-        ctx.filter = 'blur(80px) brightness(1.2) contrast(1.3)';
+        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);