build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
34
src/components/Image/BlurhashImg.vue
Normal file
34
src/components/Image/BlurhashImg.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<canvas ref="canvas" width="32" height="32" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { decode } from "blurhash";
|
||||
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
hash: string;
|
||||
aspectRatio?: number;
|
||||
}>(),
|
||||
{ aspectRatio: 1 }
|
||||
);
|
||||
|
||||
const canvas = ref<HTMLCanvasElement | undefined>(undefined);
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
if (canvas.value) {
|
||||
const pixels = decode(props.hash, 32, 32);
|
||||
const imageData = new ImageData(pixels, 32, 32);
|
||||
const context = canvas.value.getContext("2d");
|
||||
if (context) {
|
||||
context.putImageData(imageData, 0, 0);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user