Angular-Pharkas-Blurhash
This library provides an Observable-First, Zone-Free wrapper for the Vanilla JS library Blurhash built with the angular-pharkas component framework.
It's key benefits are:
- Zone-Free
-
ChangeDetectionStrategy.OnPush
tells Angular that it doesn't need to work to detect any template changes
-
The Inevitable Angular Compatibility Chart
Library version | Supported Angular |
---|---|
2.0.0 | Angular 15 |
<=1.0.0 | Angular 13 |
Usage
Import PharkasBlurhashModule
and use <pharkas-blurhash>
. The API:
<pharkas-blurhash [image]="blurhashDescriptionObservable"></pharkas-blurhash>
[image]
is an Observable<BlurhashDescription>
where BlurhashDescription
is a simple interface describing
image metadata including the relevant blurhash.
BlurhashDescription
{
width: '100%',
canvasWidth: 1024,
height: '100%',
canvasHeight: 728,
blurhash: 'xyz…',
blurhashPunch: 1,
imageSrc: 'https://…',
imageAlt: 'An example image of…'
}
Required:
-
blurhash
is the Blurhash to display -
imageSrc
is the image to display -
imageAlt
is the alternate description -
width
is the width of the container (for both the blurhash and the image) as either a number (of pixels) or CSS size -
height
is the height of the container (for both the blurhash and the image) as either a number (of pixels) or CSS size
Optional:
-
blurhashPunch
is a dial of the "punch" of a blurhash and defaults to1
. -
canvasWidth
is the size of canvas the blurhash is painted on, in pixels. It falls back to thewidth
when provided as a number and otherwise defaults to 160 (for an assumption of 16x9 photos as default) -
canvasHeight
is the size of canvas the blurhash is painted on, in pixels. It falls back to theheight
when provided as a number and otherwise defaults to 90 (for an assumption of 16x9 photos as default)