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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue'; import { onMounted, watch } from 'vue';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -28,6 +28,8 @@ const props = withDefaults(defineProps<{
const canvas = $shallowRef<HTMLCanvasElement>(); const canvas = $shallowRef<HTMLCanvasElement>();
let loaded = $ref(false); let loaded = $ref(false);
let width = $ref(props.width);
let height = $ref(props.height);
function draw() { function draw() {
if (props.hash == null) return; if (props.hash == null) return;
@ -42,6 +44,23 @@ function onLoad() {
loaded = true; 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(() => { onMounted(() => {
draw(); draw();
}); });

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

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