pixelfed/pixelfed

<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>