pixelfed/resources/assets/components/partials/BlurhashCanvas.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>