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>
This commit is contained in:
2025-11-17 12:09:49 +01:00
parent 9eb66b4fa3
commit 63cb9bcff5
3 changed files with 10 additions and 7 deletions

View File

@@ -25,12 +25,8 @@ export async function convertWithImageMagick(
if (onProgress) onProgress(30);
// Import ImageMagick functions
const { ImageMagick, initializeImageMagick } = await import('@imagemagick/magick-wasm');
// Initialize ImageMagick with WASM URL from CDN
const wasmUrl = 'https://cdn.jsdelivr.net/npm/@imagemagick/magick-wasm@0.0.30/dist/magick.wasm';
await initializeImageMagick(wasmUrl);
// Import ImageMagick functions (already initialized by loadImageMagick)
const { ImageMagick } = await import('@imagemagick/magick-wasm');
if (onProgress) onProgress(40);

View File

@@ -60,11 +60,18 @@ export async function loadImageMagick(): Promise<any> {
}
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 successfully');
console.log('ImageMagick loaded and initialized successfully');
return imagemagickInstance;
} catch (error) {

BIN
public/wasm/magick.wasm Normal file

Binary file not shown.