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:
@@ -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);
|
||||
|
||||
|
||||
@@ -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
BIN
public/wasm/magick.wasm
Normal file
Binary file not shown.
Reference in New Issue
Block a user