mirror of https://github.com/pixelfed/pixelfed.git
62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
<template>
|
|
<canvas ref="canvas" :width="parseNumber(width)" :height="parseNumber(height)" />
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
import { decode } from 'blurhash';
|
|
|
|
export default {
|
|
props: {
|
|
hash: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
|
|
width: {
|
|
type: [Number, String],
|
|
default: 32
|
|
},
|
|
|
|
height: {
|
|
type: [Number, String],
|
|
default: 32
|
|
},
|
|
|
|
punch: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.draw();
|
|
},
|
|
|
|
updated() {
|
|
// this.draw();
|
|
},
|
|
|
|
beforeDestroy() {
|
|
// this.hash = null;
|
|
// this.$refs.canvas = null;
|
|
},
|
|
|
|
methods: {
|
|
parseNumber(val) {
|
|
return typeof val === 'number' ? val : parseInt(val, 10);
|
|
},
|
|
|
|
draw() {
|
|
const width = this.parseNumber(this.width);
|
|
const height = this.parseNumber(this.height);
|
|
const punch = this.parseNumber(this.punch);
|
|
const pixels = decode(this.hash, width, height, punch);
|
|
const ctx = this.$refs.canvas.getContext('2d');
|
|
const imageData = ctx.createImageData(width, height);
|
|
imageData.data.set(pixels);
|
|
ctx.putImageData(imageData, 0, 0);
|
|
},
|
|
}
|
|
}
|
|
</script>
|