https://github.com/thaddeusjiang/vue-blurhash-canvas
Only 31 lines implement blurha.sh for Vue.js
https://github.com/thaddeusjiang/vue-blurhash-canvas
blurhash vuejs
Last synced: 5 months ago
JSON representation
Only 31 lines implement blurha.sh for Vue.js
- Host: GitHub
- URL: https://github.com/thaddeusjiang/vue-blurhash-canvas
- Owner: ThaddeusJiang
- License: gpl-3.0
- Archived: true
- Created: 2020-10-18T05:50:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2020-11-12T05:25:05.000Z (over 4 years ago)
- Last Synced: 2025-01-29T07:28:28.438Z (5 months ago)
- Topics: blurhash, vuejs
- Language: Vue
- Homepage:
- Size: 182 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-blurhash-canvas
> Vue components for using the [blurhash algorithm](https://blurha.sh) in your Vue projects
## Install
```
yarn add blurhash vue-blurhash-canvas
```
## Usage
```vue
import Blurhash from "vue-blurhash-canvas";
export default {
components: {
Blurhash,
},
};
```
### 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) |
## Contribute
```sh
$ yarn
$ yarn add --peer vue blurhash core-js
$ yarn dev
```