0.0.4 • Published 6 months ago
qwik-blurhash v0.0.4
qwik-blurhash
Qwik components for using the blurhash algorithm in your Qwik projects
Install
npm install --save blurhash qwik-blurhashUsage
<Blurhash />
import { Blurhash } from "qwik-blurhash";Description
Blurhash component is the recommended way to render blurhashes in your Qwik projects.
It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and resolutionY props.
Props
| name | description |
|---|---|
hash (string) | The encoded blurhash string. |
width (int | string) | Width (CSS) of the decoded image. |
height (int | string) | Height (CSS) of the decoded image. |
resolutionX (int) | The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
resolutionY (int) | The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
punch (int) | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1) |
strategy (VisibleTaskStrategy) | The strategy to use to determine when the "VisibleTask" should first execute. |
Example
<Blurhash
hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
width={400}
height={300}
resolutionX={32}
resolutionY={32}
punch={1}
/><BlurhashCanvas />
import { BlurhashCanvas } from "qwik-blurhash";Description
BlurhashCanvas is the barebones implementation of a blurhash string to a canvas. You may want to use it instead of the Blurhash component e.g. if you want to control the scaling yourself.
Props
| name | description |
|---|---|
hash (string) | The encoded blurhash string. |
width (int) | Width of the decoded image. |
height (int) | Height of the decoded image. |
punch (int) | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1) |
Example
<BlurhashCanvas hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj" width={400} height={300} punch={1} />VisibleTaskStrategy
useVisibleTask$ hook has been used to decode the blurhash string and render the canvas.
| value | description |
|---|---|
intersection-observer | the task will first execute when the element is visible in the viewport, under the hood it uses the IntersectionObserver API. |
document-ready | document-ready: the task will first execute when the document is ready, under the hood it uses the document load event. |
document-idle | document-idle: the task will first execute when the document is idle, under the hood it uses the requestIdleCallback API. |
TODO:
- Consider using the
worker$(currently experimental) to decode the blurhash string.
Browser support
Blurhash depends on Uint8ClampedArray, which is supported on all mainstream browsers and >=IE11.