perf(frontend): MkImgWithBlurhashでblurhash描画に使うcanvasは再利用するようにする (#10966)

* blurhashを描画するためのcanvasは再利用する

* Revert "perf(frontend): WebGL contextの数を減らす"

This reverts commit aeb8955ca2600e801d44dcac2005fc994e665a6c.

* MkAvatarは平均色だけにする

* clean up

* fix

1 files changed, 32 insertions, 19 deletions

diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 672a28f6d0..cb229fa241 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -22,10 +22,13 @@ import TestWebGL2 from '@/workers/test-webgl2?worker';
 import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch';
 import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
 
-const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {
+const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resolve => {
 	// テスト環境で Web Worker インスタンスは作成できない
 	if (import.meta.env.MODE === 'test') {
-		resolve(null);
+		const canvas = document.createElement('canvas');
+		canvas.width = 64;
+		canvas.height = 64;
+		resolve(canvas);
 		return;
 	}
 	const testWorker = new TestWebGL2();
@@ -38,7 +41,10 @@ const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {
 			resolve(workers);
 			if (_DEV_) console.log('WebGL2 in worker is supported!');
 		} else {
-			resolve(null);
+			const canvas = document.createElement('canvas');
+			canvas.width = 64;
+			canvas.height = 64;
+			resolve(canvas);
 			if (_DEV_) console.log('WebGL2 in worker is not supported...');
 		}
 		testWorker.terminate();
@@ -70,6 +76,7 @@ const props = withDefaults(defineProps<{
 	width?: number;
 	cover?: boolean;
 	forceBlurhash?: boolean;
+	onlyAvgColor?: boolean; // 軽量化のためにBlurhashを使わずに平均色だけを描画
 }>(), {
 	transition: null,
 	src: null,
@@ -79,6 +86,7 @@ const props = withDefaults(defineProps<{
 	width: 64,
 	cover: true,
 	forceBlurhash: false,
+	onlyAvgColor: false,
 });
 
 const viewId = uuid();
@@ -139,8 +147,8 @@ function drawImage(bitmap: CanvasImageSource) {
 	ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
 }
 
-async function draw() {
-	if (!canvas.value || props.hash == null) return;
+function drawAvg() {
+	if (!canvas.value || !props.hash) return;
 
 	const ctx = canvas.value.getContext('2d');
 	if (!ctx) return;
@@ -149,25 +157,28 @@ async function draw() {
 	ctx.beginPath();
 	ctx.fillStyle = extractAvgColorFromBlurhash(props.hash) ?? '#888';
 	ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+}
+
+async function draw() {
+	if (props.hash == null) return;
 
-	const workers = await workerPromise;
-	if (workers) {
-		workers.postMessage(
+	drawAvg();
+
+	if (props.onlyAvgColor) return;
+
+	const work = await canvasPromise;
+	if (work instanceof WorkerMultiDispatch) {
+		work.postMessage(
 			{
 				id: viewId,
 				hash: props.hash,
-				width: canvasWidth,
-				height: canvasHeight,
 			},
 			undefined,
 		);
 	} else {
 		try {
-			const work = document.createElement('canvas');
-			work.width = canvasWidth;
-			work.height = canvasHeight;
 			render(props.hash, work);
-			ctx.drawImage(work, 0, 0, canvasWidth, canvasHeight);
+			drawImage(work);
 		} catch (error) {
 			console.error('Error occured during drawing blurhash', error);
 		}
@@ -179,9 +190,9 @@ function workerOnMessage(event: MessageEvent) {
 	drawImage(event.data.bitmap as ImageBitmap);
 }
 
-workerPromise.then(worker => {
-	if (worker) {
-		worker.addListener(workerOnMessage);
+canvasPromise.then(work => {
+	if (work instanceof WorkerMultiDispatch) {
+		work.addListener(workerOnMessage);
 	}
 
 	draw();
@@ -204,8 +215,10 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	workerPromise.then(worker => {
-		worker?.removeListener(workerOnMessage);
+	canvasPromise.then(work => {
+		if (work instanceof WorkerMultiDispatch) {
+			work.removeListener(workerOnMessage);
+		}
 	});
 });
 </script>