Use Web Worker

Author: 3846masa

src/filters/applyFilter.js

@@ -1,20 +1,30 @@
-import * as filters from './filters';
+const worker = new Worker('./worker.js');
+worker.addEventListener('error', console.error);
 
 /** @param {string} filterName */
 /** @param {Blob} blob */
 const filter = async (filterName, blob) => {
-  if (!filters[filterName]) {
-    return blob;
-  }
-
   const imageBitmap = await createImageBitmap(blob);
   const canvas = document.createElement('canvas');
 
   Object.assign(canvas, {
     width: imageBitmap.width,
     height: imageBitmap.height,
   });
-  await filters[filterName](canvas, imageBitmap);
+
+  const offscreen = canvas.transferControlToOffscreen();
+  const waitPromise = new Promise((resolve) =>
+    worker.addEventListener('message', (ev) => resolve(ev.data), { once: true }),
+  );
+  worker.postMessage({ filterName, imageBitmap, canvas: offscreen }, [offscreen]);
+
+  const { status, error } = await waitPromise;
+  if (error) {
+    throw new Error(err);
+  }
+  if (status === 'not_found') {
+    return blob;
+  }
 
   const filtered = new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg'));
   return filtered;

src/filters/purejs/grayScale.js

@@ -19,6 +19,8 @@ function grayScale(canvas, imageBitmap) {
   }
 
   ctx.putImageData(imageData, 0, 0);
+
+  return ctx;
 }
 
 export default grayScale;

src/filters/wasm/posterize.js

@@ -24,6 +24,8 @@ function posterize(canvas, imageBitmap) {
   if (error) {
     throw error;
   }
+
+  return ctx;
 }
 
 export default posterize;

src/filters/worker.js

@@ -2,10 +2,14 @@ import * as filters from './filters.js';
 
 self.addEventListener('message', async ({ data: { filterName, canvas, imageBitmap } }) => {
   try {
-    await filters[filterName](canvas, imageBitmap);
+    if (!filters[filterName]) {
+      return self.postMessage({ status: 'not_found' });
+    }
+    const ctx = await filters[filterName](canvas, imageBitmap);
+    ctx.commit();
+    return self.postMessage({ status: 'ok' });
   } catch (err) {
     console.error(err);
     return self.postMessage({ error: err.message });
   }
-  return self.postMessage({ success: true });
 });

src/helpers/makeWebGLRenderFromShaderTexts.js

@@ -76,6 +76,8 @@ const makeWebGLRenderFromShaderTexts = (shaders) => async (canvas, imageBitmap)
 
   /** 三角形を描画する */
   gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+  return gl;
 };
 
 export default makeWebGLRenderFromShaderTexts;