diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
| commit | 9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch) | |
| tree | ce5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkImgWithBlurhash.vue | |
| parent | wip: retention for dashboard (diff) | |
| download | misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2 misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip | |
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/MkImgWithBlurhash.vue')
| -rw-r--r-- | packages/client/src/components/MkImgWithBlurhash.vue | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue deleted file mode 100644 index 80d7c201a4..0000000000 --- a/packages/client/src/components/MkImgWithBlurhash.vue +++ /dev/null @@ -1,76 +0,0 @@ -<template> -<div class="xubzgfgb" :class="{ cover }" :title="title"> - <canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/> - <img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/> -</div> -</template> - -<script lang="ts" setup> -import { onMounted } from 'vue'; -import { decode } from 'blurhash'; - -const props = withDefaults(defineProps<{ - src?: string | null; - hash?: string; - alt?: string; - title?: string | null; - size?: number; - cover?: boolean; -}>(), { - src: null, - alt: '', - title: null, - size: 64, - cover: true, -}); - -const canvas = $ref<HTMLCanvasElement>(); -let loaded = $ref(false); - -function draw() { - if (props.hash == null) return; - const pixels = decode(props.hash, props.size, props.size); - const ctx = canvas.getContext('2d'); - const imageData = ctx!.createImageData(props.size, props.size); - imageData.data.set(pixels); - ctx!.putImageData(imageData, 0, 0); -} - -function onLoad() { - loaded = true; -} - -onMounted(() => { - draw(); -}); -</script> - -<style lang="scss" scoped> -.xubzgfgb { - position: relative; - width: 100%; - height: 100%; - - > canvas, - > img { - display: block; - width: 100%; - height: 100%; - } - - > canvas { - position: absolute; - object-fit: cover; - } - - > img { - object-fit: contain; - } - - &.cover { - > img { - object-fit: cover; - } - } -} -</style> |