38 lines
1.0 KiB
Plaintext
38 lines
1.0 KiB
Plaintext
import Component from '@glimmer/component';
|
|
import { modifier } from 'ember-modifier';
|
|
import { decode } from 'blurhash';
|
|
|
|
export default class Blurhash extends Component {
|
|
renderBlurhash = modifier((canvas, [hash, width, height]) => {
|
|
if (!hash || !canvas) return;
|
|
|
|
// Default size to a small multiple of aspect ratio to save CPU
|
|
// 32x18 is a good balance of speed vs quality for 16:9
|
|
const renderWidth = width || 32;
|
|
const renderHeight = height || 18;
|
|
|
|
canvas.width = renderWidth;
|
|
canvas.height = renderHeight;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
try {
|
|
const pixels = decode(hash, renderWidth, renderHeight);
|
|
const imageData = ctx.createImageData(renderWidth, renderHeight);
|
|
imageData.data.set(pixels);
|
|
ctx.putImageData(imageData, 0, 0);
|
|
} catch (e) {
|
|
console.warn('Failed to decode blurhash:', e);
|
|
}
|
|
});
|
|
|
|
<template>
|
|
<canvas
|
|
class="blurhash-canvas"
|
|
...attributes
|
|
{{this.renderBlurhash @hash @width @height}}
|
|
></canvas>
|
|
</template>
|
|
}
|