summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkImgWithBlurhash.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
commit9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch)
treece5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkImgWithBlurhash.vue
parentwip: retention for dashboard (diff)
downloadmisskey-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.vue76
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>