NgxBlurhashRender

This is a simple lighweight library that renders the blurhash of a provided image. For Angular 15+.

Note: Requires blurhash as a dependency.

Warning: Not available for versions older than Angular 15. Currently supports Versions 15-18.

DEMO

Features

• Smooth animation for transition from canvas to image 💖
• Auto decoding of provided blurhash string and rendering to canvas 💪
• Customisable for images and containers of all sizes 🤖
• Blazingly fast and easy on your bundle size 🚀

Example

Import the package directly as a standalone component.

import { NgxBlurhashComponent } from 'ngx-blurhash-render';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, NgxBlurhashComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

In your HTML file simply add the following code snippet:

  <ngx-blurhash-render
    [blurHash]="'L38gy-00~qIUIUt7M{RjM{j[t7of'"
    [imageSrc]="'https://api.animetography-blog.com/api/media-upload/mediaFiles/test/31146bc10b344cdb90a13eae66102953f7.jpg'"
    [width]="'100px'"
    [height]="'100px'"
    [borderRadius]="'12px'"
  >
  </ngx-blurhash-render>

Options

| Input | Value | Description | | :--- | :----: | ---: | | [blurHash] | 'string' | The blurhash string | | [imageSrc] | 'string' | The actual image path or url | | [width] | 'string' | The width of the image | | [height] | 'string' | The height of the image | | [borderRadius] | 'string' | The border radius of the image |