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

fetch image??

Browse source
This commit is contained in:
tamaina 2023-05-06 16:25:09 +00:00
parent 928edeb634
commit 0925c28d5a
1 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,5 @@
<template> <template>
<div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''"> <div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<img v-if="!loaded && src" :class="$style.loader" :src="src" @load="onLoad"/>
<Transition <Transition
mode="in-out" mode="in-out"
:enter-active-class="defaultStore.state.animation && (props.transition?.enterActiveClass ?? $style['transition_toggle_enterActive']) || undefined" :enter-active-class="defaultStore.state.animation && (props.transition?.enterActiveClass ?? $style['transition_toggle_enterActive']) || undefined"
@ -10,8 +9,8 @@
:enter-to-class="defaultStore.state.animation && (props.transition?.enterToClass ?? $style['transition_toggle_enterTo']) || undefined" :enter-to-class="defaultStore.state.animation && (props.transition?.enterToClass ?? $style['transition_toggle_enterTo']) || undefined"
:leave-from-class="defaultStore.state.animation && (props.transition?.leaveFromClass ?? $style['transition_toggle_leaveFrom']) || undefined" :leave-from-class="defaultStore.state.animation && (props.transition?.leaveFromClass ?? $style['transition_toggle_leaveFrom']) || undefined"
> >
<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/> <canvas v-if="!url || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
<img v-else :class="$style.img" :width="props.width" :height="props.height" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined"/> <img v-else :class="$style.img" :width="props.width" :height="props.height" :src="url" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/>
</Transition> </Transition>
</div> </div>
</template> </template>
@ -62,13 +61,9 @@ const offscreen = computed(() => {
}, [_offscreen]); }, [_offscreen]);
return _offscreen; return _offscreen;
}); });
let loaded = $ref(false);
let canvasWidth = $ref(props.width); let canvasWidth = $ref(props.width);
let canvasHeight = $ref(props.height); let canvasHeight = $ref(props.height);
let url = $ref<string>();
function onLoad() {
loaded = true;
}
watch([() => props.width, () => props.height], () => { watch([() => props.width, () => props.height], () => {
const ratio = props.width / props.height; const ratio = props.width / props.height;
@ -83,6 +78,20 @@ watch([() => props.width, () => props.height], () => {
immediate: true, immediate: true,
}); });
watch([() => props.src], () => {
if (url) {
URL.revokeObjectURL(url);
url = undefined;
}
if (props.src) {
fetch(props.src, { mode: 'no-cors' })
.then((res) => res.blob())
.then((blob) => {
url = URL.createObjectURL(blob);
});
}
}, { immediate: true });
function draw() { function draw() {
if (props.hash == null || !offscreen.value) return; if (props.hash == null || !offscreen.value) return;
worker.postMessage({ worker.postMessage({
@ -103,7 +112,7 @@ onMounted(() => {
} else { } else {
// 100ms後に画像の読み込みが完了していなければblurhashを描画する // 100ms後に画像の読み込みが完了していなければblurhashを描画する
setTimeout(() => { setTimeout(() => {
if (!loaded) { if (!url) {
draw(); draw();
} }
}, 100); }, 100);