#10781

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
-	<img v-if="!loaded && src && !forceBlurhash" :class="$style.loader" :src="src" @load="onLoad"/>
+	<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,16 +10,18 @@
 		: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="width" :height="height" :title="title ?? undefined"/>
+		<canvas v-if="!loaded || forceBlurhash" ref="canvas" :class="$style.canvas" :width="canvasWidth" :height="canvasHeight" :title="title ?? undefined"/>
-		<img v-else :class="$style.img" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined"/>
+		<img v-else :class="$style.img" :width="props.width" :height="props.height" :src="src ?? undefined" :title="title ?? undefined" :alt="alt ?? undefined"/>
 	</Transition>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, shallowRef, useCssModule, watch } from 'vue';
+import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue';
-import { decode } from 'blurhash';
 import { defaultStore } from '@/store';
+import DrawBlurhash from '@/workers/draw-blurhash?worker';
+
+let worker: Worker;
 
 const $style = useCssModule();
 
@@ -52,9 +54,17 @@ const props = withDefaults(defineProps<{
 });
 
 const canvas = shallowRef<HTMLCanvasElement>();
+const offscreen = computed(() => {
+	if (!canvas.value) return;
+	const _offscreen = canvas.value.transferControlToOffscreen();
+	worker.postMessage({
+		canvas: _offscreen,
+	}, [_offscreen]);
+	return _offscreen;
+});
 let loaded = $ref(false);
-let width = $ref(props.width);
+let canvasWidth = $ref(props.width);
-let height = $ref(props.height);
+let canvasHeight = $ref(props.height);
 
 function onLoad() {
 	loaded = true;
@@ -63,31 +73,45 @@ function onLoad() {
 watch([() => props.width, () => props.height], () => {
 	const ratio = props.width / props.height;
 	if (ratio > 1) {
-		width = Math.round(64 * ratio);
+		canvasWidth = Math.round(64 * ratio);
-		height = 64;
+		canvasHeight = 64;
 	} else {
-		width = 64;
+		canvasWidth = 64;
-		height = Math.round(64 / ratio);
+		canvasHeight = Math.round(64 / ratio);
 	}
 }, {
 	immediate: true,
 });
 
 function draw() {
-	if (props.hash == null || !canvas.value) return;
+	if (props.hash == null || !offscreen.value) return;
-	const pixels = decode(props.hash, width, height);
+	worker.postMessage({
-	const ctx = canvas.value.getContext('2d');
+		hash: props.hash,
-	const imageData = ctx!.createImageData(width, height);
+		width: canvasWidth,
-	imageData.data.set(pixels);
+		height: canvasHeight,
-	ctx!.putImageData(imageData, 0, 0);
+	});
 }
 
-watch([() => props.hash, canvas], () => {
+watch([() => props.hash, offscreen], () => {
 	draw();
 });
 
 onMounted(() => {
-	draw();
+	worker = new DrawBlurhash();
+	if (props.forceBlurhash) {
+		draw();
+	} else {
+		// 100ms後に画像の読み込みが完了していなければblurhashを描画する
+		setTimeout(() => {
+			if (!loaded) {
+				draw();
+			}
+		}, 100);
+	}
+});
+
+onUnmounted(() => {
+	worker.terminate();
 });
 </script>
 

packages/frontend/src/components/MkMediaImage.vue

@@ -1,27 +1,32 @@
 <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="image.properties.width" :height="image.properties.height" :force-blurhash="defaultStore.state.enableDataSaverMode"/>
-	<div :class="$style.hiddenText">
+</div>-->
+<div :class="hide ? $style.hidden : $style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'" @click="onclick">
+	<a
+		:class="$style.imageContainer"
+		:href="image.url"
+		:title="image.name"
+	>
+		<ImgWithBlurhash :hash="image.blurhash" :src="(defaultStore.state.enableDataSaverMode && hide) ? null : url" :force-blurhash="hide" :cover="hide" :alt="image.comment || image.name" :title="image.comment || image.name" :width="image.properties.width" :height="image.properties.height"/>
+	</a>
+	<template v-if="hide">
+		<div :class="$style.hiddenText">
 		<div :class="$style.hiddenTextWrapper">
 			<b v-if="image.isSensitive" style="display: block;"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}{{ defaultStore.state.enableDataSaverMode ? ` (${i18n.ts.image}${image.size ? ' ' + bytes(image.size) : ''})` : '' }}</b>
 			<b v-else style="display: block;"><i class="ti ti-photo"></i> {{ defaultStore.state.enableDataSaverMode && image.size ? bytes(image.size) : i18n.ts.image }}</b>
 			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
-</div>
+	</template>
-<div v-else :class="$style.visible" :style="darkMode ? '--c: rgb(255 255 255 / 2%);' : '--c: rgb(0 0 0 / 2%);'">
+	<template v-else>
-	<a
+		<div :class="$style.indicators">
-		:class="$style.imageContainer"
+			<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
-		:href="image.url"
+			<div v-if="image.comment" :class="$style.indicator">ALT</div>
-		:title="image.name"
+		</div>
-	>
+		<button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click.stop.prevent="hide = true"><i class="ti ti-eye-off"></i></button>
-		<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"/>
+	</template>
-	</a>
-	<div :class="$style.indicators">
-		<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
-		<div v-if="image.comment" :class="$style.indicator">ALT</div>
-	</div>
-	<button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click="hide = true"><i class="ti ti-eye-off"></i></button>
 </div>
 </template>
 
@@ -49,6 +54,12 @@ const url = $computed(() => (props.raw || defaultStore.state.loadRawImages)
 		: props.image.thumbnailUrl,
 );
 
+function onclick() {
+	if (hide) {
+		hide = false;
+	}
+}
+
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 watch(() => props.image, () => {
 	hide = (defaultStore.state.nsfw === 'force' || defaultStore.state.enableDataSaverMode) ? true : (props.image.isSensitive && defaultStore.state.nsfw !== 'ignore');

packages/frontend/src/workers/draw-blurhash.ts

@@ -0,0 +1,20 @@
+import { decode } from 'blurhash';
+
+let canvas: OffscreenCanvas | null = null;
+
+onmessage = (event) => {
+    if ('canvas' in event.data) {
+        canvas = event.data.canvas;
+    }
+    if (!(canvas && 'hash' in event.data && typeof event.data.hash === 'string')) {
+        return;
+    }
+    const width = event.data.width ?? 64;
+    const height = event.data.height ?? 64;
+	const ctx = canvas.getContext!('2d');
+    if (!ctx) return;
+	const imageData = ctx.createImageData(width, height);
+    const pixels = decode(event.data.hash, width, height);
+	imageData.data.set(pixels);
+	ctx!.putImageData(imageData, 0, 0);
+};

packages/frontend/src/workers/tsconfig.json

@@ -0,0 +1,7 @@
+
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"lib": ["esnext", "webworker"],
+	}
+}

packages/frontend/vite.config.ts

@@ -139,6 +139,10 @@ export function getConfig(): UserConfig {
 			},
 		},
 
+		worker: {
+			format: 'es',
+		},
+
 		test: {
 			environment: 'happy-dom',
 			deps: {