0.1.1 • Published 3 years ago
vue-blurhash-canvas v0.1.1
vue-blurhash-canvas
Vue components for using the blurhash algorithm in your Vue projects
Install
yarn add blurhash vue-blurhash-canvasUsage
<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