Files
convert-ui/lib/wasm/wasmLoader.ts
Sebastian Krüger 63cb9bcff5 fix: properly initialize ImageMagick WASM by serving from public directory
The previous approach tried to load the WASM file from a CDN or node_modules,
which resulted in an empty buffer error. This fix copies the WASM file to the
public directory so it can be served alongside the static export.

Changes:
- Copy magick.wasm (16MB) to public/wasm/ directory
- Update wasmLoader.ts to initialize with '/wasm/magick.wasm' URL
- Initialize ImageMagick only once in loadImageMagick()
- Remove redundant initialization from imagemagickService.ts
- WASM file is now served from static assets in production

This ensures:
- WASM file is accessible at runtime
- Proper initialization before image conversions
- No "empty buffer" compilation errors
- Works in both dev and production (static export)

The 16MB WASM file includes the full ImageMagick library with all
image format support and processing capabilities.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 12:09:49 +01:00

129 lines
3.2 KiB
TypeScript

import type { FFmpeg } from '@ffmpeg/ffmpeg';
import type { ConverterEngine, WASMModuleState } from '@/types/conversion';
/**
* WASM module loading state
*/
const moduleState: WASMModuleState = {
ffmpeg: false,
imagemagick: false,
};
/**
* Cached WASM instances
*/
let ffmpegInstance: FFmpeg | null = null;
let imagemagickInstance: any = null;
/**
* Load FFmpeg WASM module
*/
export async function loadFFmpeg(): Promise<FFmpeg> {
if (ffmpegInstance && moduleState.ffmpeg) {
return ffmpegInstance;
}
try {
const { FFmpeg } = await import('@ffmpeg/ffmpeg');
const { toBlobURL } = await import('@ffmpeg/util');
ffmpegInstance = new FFmpeg();
// Load core and dependencies
const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
ffmpegInstance.on('log', ({ message }) => {
console.log('[FFmpeg]', message);
});
await ffmpegInstance.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
});
moduleState.ffmpeg = true;
console.log('FFmpeg loaded successfully');
return ffmpegInstance;
} catch (error) {
console.error('Failed to load FFmpeg:', error);
throw new Error('Failed to load FFmpeg WASM module');
}
}
/**
* Load ImageMagick WASM module
*/
export async function loadImageMagick(): Promise<any> {
if (imagemagickInstance && moduleState.imagemagick) {
return imagemagickInstance;
}
try {
const { initializeImageMagick } = await import('@imagemagick/magick-wasm');
// Initialize ImageMagick with WASM file from public directory
// In production (static export), this will be served from /wasm/magick.wasm
const wasmUrl = '/wasm/magick.wasm';
await initializeImageMagick(wasmUrl);
const ImageMagick = await import('@imagemagick/magick-wasm');
imagemagickInstance = ImageMagick;
moduleState.imagemagick = true;
console.log('ImageMagick loaded and initialized successfully');
return imagemagickInstance;
} catch (error) {
console.error('Failed to load ImageMagick:', error);
throw new Error('Failed to load ImageMagick WASM module');
}
}
/**
* Get loaded module state
*/
export function getModuleState(): WASMModuleState {
return { ...moduleState };
}
/**
* Check if a specific module is loaded
*/
export function isModuleLoaded(engine: ConverterEngine): boolean {
return moduleState[engine];
}
/**
* Load appropriate WASM module for converter engine
*/
export async function loadModule(engine: ConverterEngine): Promise<any> {
switch (engine) {
case 'ffmpeg':
return loadFFmpeg();
case 'imagemagick':
return loadImageMagick();
default:
throw new Error(`Unknown converter engine: ${engine}`);
}
}
/**
* Unload all WASM modules and free memory
*/
export function unloadAll(): void {
if (ffmpegInstance) {
// FFmpeg doesn't have an explicit unload method
// Just null the instance
ffmpegInstance = null;
moduleState.ffmpeg = false;
}
if (imagemagickInstance) {
imagemagickInstance = null;
moduleState.imagemagick = false;
}
console.log('All WASM modules unloaded');
}