WIP

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -114,20 +114,6 @@ watch([() => props.width, () => props.height, root], () => {
 	immediate: true,
 });
 
-workerPromise.then(worker => {
-	if (!worker) return;
-
-	worker.postMessage({
-		id: viewId,
-		hash: props.hash,
-	});
-
-	worker.addEventListener('message', event => {
-		if (event.data.id !== viewId) return;
-		drawImage(event.data.bitmap as ImageBitmap);
-	});
-});
-
 function drawImage(bitmap: CanvasImageSource) {
 	// canvasがない（mountedされていない）場合はTmpに保存しておく
 	if (!canvas.value) {
@@ -165,6 +151,19 @@ async function draw() {
 	}
 }
 
+function workerOnMessage(event: MessageEvent) {
+	if (event.data.id !== viewId) return;
+	drawImage(event.data.bitmap as ImageBitmap);
+}
+
+workerPromise.then(worker => {
+	if (worker) {
+		worker.addEventListener('message', workerOnMessage);
+	}
+
+	draw();
+});
+
 watch(() => props.src, () => {
 	waitForDecode();
 });
@@ -181,7 +180,11 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	workerPromise.then(worker => worker?.postMessage!({ id: viewId, delete: true }));
+	workerPromise.then(worker => {
+		if (worker) {
+			worker.removeEventListener('message', workerOnMessage);
+		}
+	});
 });
 </script>