diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index 1842d6c93b..474ecd361b 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -14,11 +14,7 @@ </TransitionGroup> </div> </template> -<script lang="ts" setup> -import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue'; -import { v4 as uuid } from 'uuid'; -import { render } from 'buraha'; -import { defaultStore } from '@/store'; +<script lang="ts"> import DrawBlurhash from '@/workers/draw-blurhash?worker'; import TestWebGL2 from '@/workers/test-webgl2?worker'; @@ -30,6 +26,12 @@ const workerPromise = new Promise<Worker | null>(resolve => { testWorker.terminate(); }); }); +</script> +<script lang="ts" setup> +import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue'; +import { v4 as uuid } from 'uuid'; +import { render } from 'buraha'; +import { defaultStore } from '@/store'; const $style = useCssModule(); const props = withDefaults(defineProps<{ @@ -100,7 +102,13 @@ async function draw(transfer: boolean = false) { }, offscreen ? [offscreen] : []); } else { try { - render(props.hash, canvas.value); + const work = document.createElement('canvas'); + work.width = canvasWidth; + work.height = canvasHeight; + render(props.hash, work); + const bitmap = await createImageBitmap(work); + const ctx = canvas.value.getContext('2d'); + ctx?.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight); } catch (error) { console.error('Error occured during drawing blurhash', error); } @@ -116,7 +124,7 @@ onMounted(() => { }); onUnmounted(() => { - workerPromise.then(worker => worker!.terminate()); + workerPromise.then(worker => worker?.postMessage!({ id: viewId, delete: true })); }); </script> diff --git a/packages/frontend/src/workers/draw-blurhash.ts b/packages/frontend/src/workers/draw-blurhash.ts index 2d12c5f06c..65ed731ff0 100644 --- a/packages/frontend/src/workers/draw-blurhash.ts +++ b/packages/frontend/src/workers/draw-blurhash.ts @@ -1,19 +1,29 @@ import { render } from 'buraha'; -let canvas: OffscreenCanvas; +const canvases = new Map<string, OffscreenCanvas>(); onmessage = async (event) => { console.log(event.data); + if (!('id' in event.data && typeof event.data.id === 'string')) { + return; + } + if (event.data.delete) { + canvases.delete(event.data.id); + } + if (event.data.canvas) { + canvases.set(event.data.id, event.data.canvas); + } if (!('hash' in event.data && typeof event.data.hash === 'string')) { return; } - - if (event.data.canvas) { - canvas = event.data.canvas; - } + const canvas = event.data.canvas ?? canvases.get(event.data.id); if (!canvas) { throw new Error('No canvas'); } - render(event.data.hash, canvas); + const work = new OffscreenCanvas(canvas.width, canvas.height); + render(event.data.hash, work); + const bitmap = await createImageBitmap(work); + const ctx = canvas.getContext('2d'); + ctx?.drawImage(bitmap, 0, 0, canvas.width, canvas.height); postMessage({ result: true }); };