Color Grabber

This Angular Directive when applied to a div will get the average color of the provided url of an image and then change the background color to that color. Any test inside the div will be colored white or black based on the average color of the image that best suites it.

Installation

npm install color-grabber

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    ColorGrabberModule
  ],

Use

In the following example, the mat-card contaner has the colorGrab directive applied.

The [imageUrl]="image" is the image to grab the color from.

The [light]="'#FFFFFF'" is the light color to use if the average color is dark. The [dark]="'#000000'" is the dark color to use if the average color is light.

The mat-card contaner background color will change to this color

The Text inside this container will also change ether to black or white depending what suites best based on that colors image.

To use in the directive, use the following

image = "https://picsum.photos/id/1/5616/3744"

<mat-card style="margin: 8px;"
  colorGrab [imageUrl]="image" [light]="'rgb(220, 220, 220)'" [dark]="'rgb(47, 79, 79)'"
  class="box"
  >
    <h3>{{ item.author }}</h3>
    <img [src]="image" width="160" height="120" style="object-fit: cover;">
</mat-card>

Paramiter

imageUrl - provide the full URL of the image (png, jpg)

colorGrab [imageUrl]="item.download_url"