vue-blurhash-canvas

Vue components for using the blurhash algorithm in your Vue projects

Install

yarn add blurhash vue-blurhash-canvas

Usage

<template>
  <Blurhash
    hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
    :width="400"
    :height="400"
    :punch="1"
  />
</template>

<script>
import Blurhash from "vue-blurhash-canvas";

export default {
  components: {
    Blurhash,
  },
};
</script>

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

$ yarn
$ yarn add --peer vue blurhash core-js
$ yarn dev