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

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

Add the Module import to your module file or directly import it if you are using a standalone component.

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

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 |