How to load wasm-vips to use image processing in a web worker

[matthewhardern]

I thought I would share this as I would have found it useful. I recently setup wasm-vips using comlink and change to vite config. Comlink just makes working with web workers a nicer syntax.

WORKER

import { expose } from 'comlink';
import Vips from 'wasm-vips';
import type { ImageProcessorResult } from './types';

const LEGO_STUD_SIZE = 8;

export class ImageProcessor {
    private vipsInstance: Awaited<ReturnType<typeof Vips>> | null = null;

    private async initVips() {
        if (!this.vipsInstance) {
            try {
                this.vipsInstance = await Vips();
            } catch (error) {
                console.error('Vips initialization error:', error);
                throw new Error('Failed to initialize Vips: ' + (error as Error).message);
            }
        }
        return this.vipsInstance;
    }


    async processImage(
        imageData: Uint8Array,
        onProgress?: (progress: number) => void
    ): Promise<ImageProcessorResult> {
        try {
            // Progress update - initialization complete
            const vips = await this.initVips();
            onProgress?.(10);

            // get image
            const image = vips.Image.newFromBuffer(imageData);
            
            // DO STUFF HERE
            
            // create buffer and metadata
            const outputBuffer = processedImage.writeToBuffer('.png');

            // Clean up vips objects
            image.delete();
            resized.delete();
            processedImage.delete();

            onProgress?.(100);

            return {
                success: true,
                data: outputBuffer,
            };

        } catch (error) {
            return {
                success: false,
                error: error instanceof Error ? error.message : 'Unknown error occurred',
            };
        }
    }

        // Add method to cleanup resources if needed
    async cleanup() {
        if (this.vipsInstance) {
            // Add any necessary cleanup for Vips
            this.vipsInstance = null;
        }
    }

}

// Expose the class instance
expose(new ImageProcessor());

CONFIG

// vite.config.ts
import { defineConfig } from 'vite';
import { vitePlugin as remix } from '@remix-run/dev';
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";
import type { PluginOption } from 'vite';
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix(),
    wasm(),
    topLevelAwait(),
    tsconfigPaths(),
  ],
  worker: {
    format: 'es',
    plugins: () => [
      wasm()
    ] as PluginOption[]
  },
  optimizeDeps: {
    exclude: ['wasm-vips'],
    esbuildOptions: {
      target: 'esnext'
    }
  },
  build: {
    target: 'esnext'
  },
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Resource-Policy": "cross-origin"
    }
  }
});

SERVER ENTRY

need to add these into the handle request section

responseHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
  responseHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
  responseHeaders.set("Cross-Origin-Resource-Policy", "cross-origin");

USING WORKER

import Worker from '~/lib/workers/image-processor/imageProcessor.worker?worker';
import type { ImageProcessor } from '~/lib/workers/image-processor/imageProcessor.worker';

const worker = new Worker();
const processor = wrap<ImageProcessor>(worker);

const arrayBuffer = await file.arrayBuffer();
const imageData = new Uint8Array(arrayBuffer);

console.log('Processing image...');
const result = await processor.processImage(
    imageData,
    proxy((progress: number) => console.log(`Progress: ${progress}%`))
);