Image compression in Angular 15+ and .NET Core 7

To edit and change the aspect ratio of an image in an Angular and .NET Core 7 application, you'll need to handle image manipulation on both the client side (Angular) and the server side (.NET Core 7). Here's a general approach:

1. Client-Side (Angular) - Adjusting Aspect Ratio Before Upload

You can allow the user to upload an image, adjust the aspect ratio on the client side, and then send the modified image to the .NET Core API.

Steps in Angular:

• Use an HTML file field to select the image.
• Use the HTML5 Canvas API to adjust the aspect ratio before sending the image to the server.
• Convert the image to a base64 or a Blob to send it to the backend API.

Example Code:

<!-- HTML for file input -->
<input type="file" (change)="onFileSelected($event)" />
<canvas #canvas></canvas>

// Angular component
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-image-resize',
  templateUrl: './image-resize.component.html',
})
export class ImageResizeComponent {
  @ViewChild('canvas', { static: false }) canvas: ElementRef<HTMLCanvasElement>;

  onFileSelected(event: any) {
    const file = event.target.files[0];
    if (file) {
      const img = new Image();
      const reader = new FileReader();

      reader.onload = (e: any) => {
        img.src = e.target.result;

        img.onload = () => {
          const ctx = this.canvas.nativeElement.getContext('2d');
          const desiredAspectRatio = 16 / 9; // Set desired aspect ratio

          // Resize logic
          const width = img.width;
          const height = img.height;
          const currentAspectRatio = width / height;

          let newWidth = width;
          let newHeight = height;

          if (currentAspectRatio > desiredAspectRatio) {
            // Crop width to match aspect ratio
            newWidth = height * desiredAspectRatio;
          } else if (currentAspectRatio < desiredAspectRatio) {
            // Crop height to match aspect ratio
            newHeight = width / desiredAspectRatio;
          }

          // Resize and draw the image to the canvas
          this.canvas.nativeElement.width = newWidth;
          this.canvas.nativeElement.height = newHeight;
          ctx?.drawImage(img, 0, 0, newWidth, newHeight);

          // Convert canvas back to Blob or base64 for upload
          this.canvas.nativeElement.toBlob((blob) => {
            // Send blob to the .NET Core backend
            this.uploadImage(blob);
          }, 'image/jpeg');
        };
      };
      reader.readAsDataURL(file);
    }
  }

  uploadImage(blob: Blob) {
    const formData = new FormData();
    formData.append('file', blob, 'resized-image.jpg');

    // Make HTTP request to upload the image
    // this.httpClient.post('your-api-url', formData).subscribe();
  }
}

2. Server-Side (.NET Core 7) - Handling the Image

On the server side, you can receive the uploaded image, process it further if needed (e.g., validation, additional resizing), and save it.

Steps in .NET Core:

• Receive the image using an API controller.
• Use libraries like ImageSharp or SkiaSharp for image manipulation.

Example Code in .NET Core 7:

Install ImageSharp via NuGet:

dotnet add package SixLabors.ImageSharp --version 2.1.3

// .NET Core API Controller
[HttpPost("upload")]
public async Task<IActionResult> UploadImage(IFormFile file)
{
    if (file != null && file.Length > 0)
    {
        using var image = await Image.LoadAsync(file.OpenReadStream());

        // Resize the image if necessary
        int newWidth = 1920;
        int newHeight = (int)(newWidth / (16.0 / 9)); // Maintain 16:9 aspect ratio

        image.Mutate(x => x.Resize(newWidth, newHeight));

        // Save the image
        var savePath = Path.Combine("wwwroot", "uploads", "resized-image.jpg");
        await image.SaveAsync(savePath);

        return Ok(new { filePath = savePath });
    }

    return BadRequest("Invalid image file.");
}

3. Upload Flow

• The user selects an image in Angular.
• The image is resized or cropped on the client side using Canvas.
• The modified image is uploaded to the .NET Core API.
• The API processes the image (if necessary) and saves it.

4. Additional Considerations

• Validation: Ensure the image meets size, format, and resolution requirements before resizing.
• Error Handling: Implement error handling for failed uploads, invalid image formats, etc.
• Image Storage: Choose appropriate storage, such as local file system, Azure Blob Storage, or AWS S3, for storing the resized images.

This setup allows you to change the aspect ratio of an image before uploading and handle it in .NET Core.

BONUS Content

1. Client-Server Flow

• The user selects an image on the client side.
• Angular resizes and compresses the image using the element and the toBlob method.
• The compressed image is sent to the .NET Core backend via an HTTP POST request.
• Optionally, the server can further compress or process the image and then save it.

Benefits of Client-Side Compression:

• Reduces file size before sending to the server, which saves bandwidth.
• Provides immediate feedback to users about image quality.

Benefits of Server-Side Compression:

• Adds an extra layer of image handling, ensuring the image meets size and quality requirements.
• Allows for bulk image processing after upload.
• By using this approach, you can significantly reduce the image size on the client side and, if necessary, further compress it on the server side.