Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

MkImgWithBlurHashでratioを計算する

Browse source
This commit is contained in:
tamaina 2023-04-12 02:17:26 +00:00
parent c9dd511d64
commit 08046ad886
2 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -6,7 +6,7 @@
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { onMounted, watch } from 'vue';
import { decode } from 'blurhash';
const props = withDefaults(defineProps<{
@ -28,6 +28,8 @@ const props = withDefaults(defineProps<{
const canvas = $shallowRef<HTMLCanvasElement>();
let loaded = $ref(false);
let width = $ref(props.width);
let height = $ref(props.height);
function draw() {
if (props.hash == null) return;
@ -42,6 +44,23 @@ function onLoad() {
loaded = true;
}
watch(() => props.hash, () => {
draw();
});
watch([() => props.width, () => props.height], () => {
const ratio = props.width / props.height;
if (ratio > 1) {
width = Math.round(64 * ratio);
height = 64;
} else {
width = 64;
height = Math.round(64 / ratio);
}
}, {
immediate: true,
});
onMounted(() => {
draw();
});

17
packages/frontend/src/components/MkMediaImage.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="hide" :class="$style.hidden" @click="hide = false">
<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment" :width="width" :height="height"/>
<ImgWithBlurhash style="filter: brightness(0.5);" :hash="image.blurhash" :title="image.comment" :alt="image.comment" :width="image.properties.width" :height="image.properties.height" />
<div :class="$style.hiddenText">
<div :class="$style.hiddenTextWrapper">
<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b>
@ -14,7 +14,7 @@
:href="image.url"
:title="image.name"
>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :width="width" :height="height" :cover="false"/>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment || image.name" :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height" :cover="false"/>
</a>
<div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
@ -39,8 +39,6 @@ const props = defineProps<{
let hide = $ref(true);
let darkMode = $ref(defaultStore.state.darkMode);
let width = $ref(64);
let height = $ref(64);
const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
? props.image.url
@ -52,17 +50,6 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
watch(() => props.image, () => {
hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
if (props.image.properties.width && props.image.properties.height) {
const ratio = props.image.properties.width / props.image.properties.height;
if (ratio > 1) {
width = Math.round(64 * ratio);
height = 64;
} else {
width = 64;
height = Math.round(64 / ratio);
}
}
}, {
deep: true,
immediate: true,