color-grabber
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    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"
    

    Install

    npm i color-grabber

    DownloadsWeekly Downloads

    4

    Version

    1.1.2

    License

    ISC

    Unpacked Size

    78.2 kB

    Total Files

    14

    Last publish

    Collaborators

    • wavecoders