https://github.com/mohid123/ngx-blurhash-render
Blurhash rendering package for Angular v 15+
https://github.com/mohid123/ngx-blurhash-render
angular blurhash blurhash-generator image-processing rendering
Last synced: 8 months ago
JSON representation
Blurhash rendering package for Angular v 15+
- Host: GitHub
- URL: https://github.com/mohid123/ngx-blurhash-render
- Owner: Mohid123
- License: mit
- Created: 2023-01-14T10:44:18.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-07T17:19:57.000Z (12 months ago)
- Last Synced: 2025-04-04T20:37:12.656Z (9 months ago)
- Topics: angular, blurhash, blurhash-generator, image-processing, rendering
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-blurhash-render
- Size: 7.44 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NgxBlurhashRender
This is a simple lighweight library that renders the blurhash of a provided image. For Angular 15+.
**Note**:
Requires [blurhash](https://www.npmjs.com/package/blurhash) as a dependency.
**Warning**:
Not available for versions older than Angular 15. Currently supports Versions 15-18.
## [DEMO](https://blurhash-pkg-demo.pages.dev/)
## 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:
```
```
## 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 |