fetch image??

sasagar · May 6, 2023 · 0925c28 · 0925c28
1 parent 928edeb
commit 0925c28
Showing 1 changed file with 18 additions and 9 deletions.
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -1,6 +1,5 @@
 <template>
 <div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
-	<img v-if="!loaded && src" :class="$style.loader" :src="src" @load="onLoad"/>
 	<Transition
 		mode="in-out"
 		: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"
 		: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"/>
-		<img v-else :class="$style.img" :width="props.width" :height="props.height" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? 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="url" :title="title ?? undefined" :alt="alt ?? undefined" loading="eager"/>
 	</Transition>
 </div>
 </template>
@@ -62,13 +61,9 @@ const offscreen = computed(() => {
 	}, [_offscreen]);
 	return _offscreen;
 });
-let loaded = $ref(false);
 let canvasWidth = $ref(props.width);
 let canvasHeight = $ref(props.height);
-
-function onLoad() {
-	loaded = true;
-}
+let url = $ref<string>();
 
 watch([() => props.width, () => props.height], () => {
 	const ratio = props.width / props.height;
@@ -83,6 +78,20 @@ watch([() => props.width, () => props.height], () => {
 	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() {
 	if (props.hash == null || !offscreen.value) return;
 	worker.postMessage({
@@ -103,7 +112,7 @@ onMounted(() => {
 	} else {
 		// 100ms後に画像の読み込みが完了していなければblurhashを描画する
 		setTimeout(() => {
-			if (!loaded) {
+			if (!url) {
 				draw();
 			}
 		}, 100);