Introduction

In this tutorial, we will learn how to remove the specific color from photos in Angular without any API or Plugin

Let’s get started.

Step 1: make a new angular project

Step 2: Now, open the app component and copy the code below into app.component.html.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./script.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>

    <div class="container mt-5">
        <div class="SelectIamge">
            <div class="mb-3">
                <label for="formFile" class="form-label fw-bold">select File:</label>
                <input class="form-control" (change)="CreateImageUrl($event)" type="file" id="ImageUpload">
            </div>
            <img class="ProfileImg"
                onerror="this.src = 'https:/www.unityhighschool.org/wp-content/uploads/2014/08/default-placeholder.png'"
                [src]="this.getSantizeUrl(ImgUrl)">
        </div>
        <div class="mt-3">
            <div class="mb-3">
                <label for="formFile" class="form-label fw-bold">Select colour to remove:</label>
                <input class="form-control" id="color_pick" type="color">
            </div>
            <div>
                <button class="btn btn-primary" (click)="removeBackgroung()">Remove Backgroung</button>
            </div>
        </div>
        <div class="mt-5 col-md-8">

            <img (src)="removeBackgroungImage" id="image" alt="">
            <canvas id='canvas'></canvas>
        </div>
    </div>
</body>

</html>

Step 3: Now, open the app.Component.ts file and put the code below into it.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'RemoveBackgroungUI';

  ngOnInit() {
    // this.removeBackgroung();
  }

  constructor(private sanitizer: DomSanitizer) {}

  public removeBackgroungImage: any;
  public ImgUrl: any;

  CreateImageUrl(event: any) {
    debugger;
    var CurruntElement = event.currentTarget;
    this.ImgUrl = URL.createObjectURL(CurruntElement.files[0]);
  }

  public getSantizeUrl(url: string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }
  removeBackgroung() {
    const canvas: any = document.getElementById('canvas');
    var ctx = canvas?.getContext('2d');
    var UploadedImg: any = document.getElementById('ImageUpload');
    var image = new Image();
    image.crossOrigin = 'Anonymous';
    image.src = this.ImgUrl;

    var selectedcolor: any = document.getElementById('color_pick');
    var Color = this.hexToRgbA(selectedcolor.value);
    var colorArray = Color.replace('rgba(', '').replace(')', '').split(',');

    image.onload = () => {
      canvas.height = image.height;
      canvas.width = image.width;
      ctx.drawImage(image, 0, 0);
      var imgd = ctx.getImageData(0, 0, image.width, image.height),
        pix = imgd.data,
        newColor = {
          r: 0,
          g: 0,
          b: 0,
          a: 0,
        };

      for (let i = 0, n = pix.length; i < n; i += 4) {
        var r = pix[i],
          g = pix[i + 1],
          b = pix[i + 2];
        if (r == colorArray[0] && g == colorArray[1] && b == colorArray[2]) {
          pix[i] = newColor.r;
          pix[i + 1] = newColor.g;
          pix[i + 2] = newColor.b;
          // pix[i + 3] = newColor.a;
        }
      }
      ctx.putImageData(imgd, 0, 0);
      this.removeBackgroungImage = imgd;
    };
  }

  hexToRgbA(hex: any) {
    var c: any;
    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
      c = hex.substring(1).split('');
      if (c.length == 3) {
        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
      }
      c = '0x' + c.join('');
      return (
        'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',1)'
      );
    }
    throw new Error('Bad Hex');
  }

}

Step 4: To app.component.css, add the following CSS.

.ProfileImg {
  height: 100px;
  width: 100px;
  border-radius: 20%;
}

.SelectIamge {
  display: grid;
  grid-auto-columns: auto;
  grid-template-columns: 90% 20%;
  grid-gap: 2rem;
}

#canvas{
    height: 35rem;
    width: 80rem;
}

That’s It

When you launch your Angular project, you should see something like this: