https://github.com/damienroche/vue-blurhash

🌁 VueJS components using the blurhash algorithm (representation of a placeholder for an image)
https://github.com/damienroche/vue-blurhash

blurhash placeholder-image vuejs

Last synced: 7 days ago
JSON representation

🌁 VueJS components using the blurhash algorithm (representation of a placeholder for an image)

• Host: GitHub
• URL: https://github.com/damienroche/vue-blurhash
• Owner: damienroche
• Created: 2020-04-29T11:28:54.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T15:21:10.000Z (about 2 years ago)
• Last Synced: 2024-12-30T19:22:59.918Z (13 days ago)
• Topics: blurhash, placeholder-image, vuejs
• Language: Vue
• Homepage:
• Size: 1.69 MB
• Stars: 52
• Watchers: 2
• Forks: 5
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-blurhash



  



> VueJS components using the [blurhash algorithm](https://blurha.sh)

## Installation

You need [Vue.js](https://vuejs.org/) **version 2.0+**

### Install via npm

```bash

npm install vue-blurhash

yarn add vue-blurhash

```

### Import and use

```javascript

import Vue from 'vue'

import VueBlurHash from 'vue-blurhash'

// Import css if you want to use image fade transition

import 'vue-blurhash/dist/vue-blurhash.css'

...

Vue.use(VueBlurHash)

```

```vue

  

```

## Props

| Name                 | Type             | Default | Description                                          |

| -------------------- | ---------------- | ------- | ---------------------------------------------------- |

| `height`             | [Number, String] | 128     | Height of image                                      |

| `width`              | [Number, String] | 128     | Width of image                                       |

| `punch`              | [Number, String] | 1       | This value adjusts the contrast on the decoded image |

| `src`                | String           | null    | Image source url                                     |

| `srcset`             | String           | null    | Image sourceset attribute                            |

| `transitionDuration` | Number           | 500     | Fade animation - Transition time (in ms)             |

## Use Canvas only

Maybe you want to only draw the placeholder from the hash and implementing your own image displaying logic.

You can do this from this way

```javascript

import { BlurHashCanvas } from "vue-blurhash";

```

```vue

  

```